d3#line TypeScript Examples

Line: React.FC<LineProps> = ({
    data,
    strokeColor,
    svgContainerData,
    scales,
}) => {
    const containerG = React.useRef<SVGGElement>();

    const initContainer = () => {
        const { g } = svgContainerData;

        containerG.current = select(g).append('g').node();
    };

    const draw = () => {
        const containerGroup = select(containerG.current);

        const { x, y } = scales;

        const xOffset = x.bandwidth() / 2;

        const valueline = line<ChartDataItem>()
            // .curve(curveMonotoneX)
            .x((d) => x(d.x) + xOffset)
            .y((d) => y(d.y));

        remove();

        containerGroup
            .append('path')
            .data([data])
            .attr('class', LinePathClassName)
            .attr('d', valueline)
            .style('fill', 'none')
            .style('stroke', strokeColor)
            .style('stroke-width', 2);
    };

    const remove = () => {
        const lines = select(containerG.current).selectAll(
            `.${LinePathClassName}`
        );

        // check the number of existing lines, if greater than 0; remove all existing ones
        if (lines.size()) {
            lines.remove().exit();
        }
    };

    React.useEffect(() => {
        if (svgContainerData) {
            initContainer();
        }
    }, [svgContainerData]);

    React.useEffect(() => {
        if (svgContainerData && scales && data) {
            draw();
        }
    }, [scales, data]);

    return null;
}

getComponent(sec: number) {
    const res = new Component({
      position: this.position,
      alpha: this.alphaScale(sec - this.fadeTime[0] - this.freezeTime[0]),
    });
    if (this.aniTime[0] > sec) return null;
    this.scales = this.getScalesBySec(sec);
    const { xAxis, yAxis } = this.getAxis(sec, this.scales);
    const lineGen = line()
      .defined((d: any) => !isNaN(d[this.valueField]))
      .x((d: any) => this.scales.x(this.secToDate.invert(d[this.dateField])))
      .y((d: any) => this.scales.y(d[this.valueField]));
    const areaGen = area()
      .defined((d: any) => !isNaN(d[this.valueField]))
      .x((d: any) => this.scales.x(this.secToDate.invert(d[this.dateField])))
      .y0(this.shape.height)
      .y1((d: any) => this.scales.y(d[this.valueField]));
    const lineArea = new Rect({
      clip: true,
      position: {
        x: this.margin.left + this.yAxisWidth + this.xAxisPadding,
        y: this.margin.top + this.xAxisHeight + this.yAxisPadding,
      },
      shape: {
        width:
          this.shape.width -
          this.margin.left -
          this.margin.right -
          this.yAxisWidth -
          this.yAxisPadding -
          this.labelPlaceholder -
          this.labelPadding -
          this.pointerR,
        height:
          this.shape.height -
          this.margin.top -
          this.margin.bottom -
          this.xAxisHeight -
          this.xAxisPadding,
      },
      fillStyle: "#0000",
    });
    const points = new Component({
      position: {
        x: this.margin.left + this.yAxisWidth + this.yAxisPadding,
        y: this.margin.top + this.xAxisHeight + this.xAxisPadding,
      },
    });

    const labels = new Component({
      position: {
        x: this.margin.left + this.yAxisWidth + this.yAxisPadding,
        y: this.margin.top + this.xAxisHeight + this.xAxisPadding,
      },
    });
    const maxX = max(this.scales.x.range());
    // 找不到最大值说明啥数据都没有，直接返回
    if (!maxX) return res;
    this.dataGroupByID.forEach((v: any[], k) => {
      const line = new Path();
      const color = colorPicker.getColor(k);
      line.strokeStyle = color;
      line.path = lineGen.curve(curveMonotoneX)(v);
      line.lineWidth = 3;
      lineArea.children.push(line);

      const areaPath = areaGen.curve(curveMonotoneX)(v);

      // 如果画不出Path直接返回
      if (!areaPath) return;

      const currentY = this.findY(areaPath, maxX);
      const point = new Arc({
        fillStyle: color,
        radius: this.pointerR,
        alpha: currentY !== undefined ? 1 : 0,
        position: { x: maxX, y: currentY },
      });

      const maxValue = this.scales.y.invert(currentY);
      if (maxValue > this.historyMax) {
        this.historyMax = maxValue;
      } else if (maxValue < this.historyMin) {
        this.historyMin = maxValue;
      }
      points.children.push(point);
      const data = new Map();
      data.set(this.valueField, maxValue);
      // 如果找不到值，则说明此时并没有数据
      if (currentY) {
        const label = new Text({
          text: this.labelFormat(k, this.meta, data),
          fontSize: this.labelSize,
          font,
          textAlign: "left",
          textBaseline: "middle",
          position: {
            x: maxX + this.labelPadding + this.pointerR,
            y: currentY,
          },
          fillStyle: color,
        });
        labels.children.push(label);
      }
    });
    res.children.push(lineArea);
    res.children.push(points);
    if (this.showAxis) {
      if (this.showXAxis) res.children.push(xAxis);
      if (this.showYAxis) res.children.push(yAxis);
    }
    res.children.push(labels);
    return res;
  }