Angular D3 理解 attrTween 函数

Question

我正在尝试了解如何在 D3 中使用 attrTween 函数。 我正在尝试从以下示例中实现饼图：http://bl.ocks.org/mbostock/5100636。

但是，当我到达过渡部分时，我遇到了问题。

  private populateGauge(): void {
    const innerRadius = this.radius - 50;
    const outerRadius = this.radius - 10;
    const arc = d3
      .arc()
      .innerRadius(innerRadius)
      .outerRadius(outerRadius)
      .startAngle(0);

    const background = this.svg
      .append('path')
      .datum({ endAngle: this.tau })
      .style('fill', '#ddd')
      .attr('d', arc);
    this.myEndAngle = { endAngle: (this.gaugeData.value / 100) * this.tau };
    const foreground = this.svg
      .append('path')
      .datum(this.myEndAngle)
      .style('fill', 'orange')
      .attr('d', arc);

    foreground
      .transition()
      .duration(1500)
      .attrTween('d', function(newAngle) {
        return function(d) {
          const interpolate = d3.interpolate(d.endAngle, newAngle);
          return function(t) {
            d.endAngle = interpolate(t);
            return arc(d);
          };
        };
      });
    }

我一直在尝试使用简单的基本情况，并且只在插值函数中使用 0，但我无法摆脱最后一个返回语句抛出的最终错误（return arc(d)）；

“数字”类型的参数不能分配给类型参数 'DefaultArcObject'。

如何解决这些问题？ 如果您需要提供更多信息，请告诉我。

Answer 1

attrTween('d',...) 接受一个返回另一个函数的函数。您将一个函数传递给它，该函数以当前 datum、index 和当前 node 作为参数调用。此函数应返回使用 time 值调用的插值函数。

当我查看您的源代码时。你有 3 个嵌套函数，这是不正确的。

您需要将 start 和 end 角度作为 datum 的值，并且不应该 mutate datum 来自补间函数。

我更喜欢在 tween 函数之外创建一个 arc 函数，然后将其用于我的插值。这更有效，因为您不是每次都创建新的 arc 函数。

const myArc = d3.arc();
// ^^^ call methods of arc() to configure settings that won't animate.

foreground
  .transition()
  .duration(1500)
  .attrTween('d', (d) => {
      return (t) => {
        const angle = d3.interpolate(d.endAngle, d.newAngle)(t);
        // ^^^ interpolate datum values using time.
        myArc.startAngle(angle);
        // ^^^ call methods of arc() to configure what you need.
        return myArc(null);
        // ^^^ call arc function to render "d" attribute.
      };
    };
  });

我发现使用节点包“@types/d3”更容易

npm install @types/d3 --save-dev

然后您可以将这些类型导入 TypeScript 文件中

import * as d3 from 'd3';

如果您有像 WebStorm 这样的 IDE。您可以在 D3 函数上按 CTRL+CLICK 并查看类型定义和 cmets。