d3#area TypeScript Examples

private findY(area: Path2D | string, x: number) {
    const l = 0;
    const r = this.shape.height;
    // 使用中值优化，O(n^2) -> O(log(n))
    const b = bisector((d: number) => {
      return canvasHelper.isPointInPath(area, x, d);
    }).left;
    const yRange = range(l, r, 1);
    const index = b(yRange, true);
    return yRange[index];
  }

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;
  }