角动饼图

Question

我正在尝试制作像此示例一样的动画d3饼图  link

角度

  private arc: any;
this.arc = d3
      .arc()
      .outerRadius(this.radius)
      .innerRadius(this.radius * 0.655);
this.slices = this.mainContainer
      .selectAll("path")
      .remove()
      .exit()
      .data(this.pie(this.airline_tonnage))
      .enter()
      .append("g")
      .append("path")
      .attr("d", this.arc)
      .attr("fill", (d, i) => this.color(i))
      .transition()
      .ease(d3.easeElasticIn)
      .duration(2000)
      .attrTween("d", function(d) {
        var i = d3.interpolate(d.startAngle + 0.1, d.endAngle);
        return function(t) {
          d.endAngle = i(t);
          return this.arc(d);
        };
      })
      .on("mouseover", function(d) {
        d3.select("#tooltip")
          .style("opacity", 1)
          .select("#value")
          .text(d.value);
      })
      .on("mouseout", function() {
        d3.select("#tooltip").style("opacity", 0);
      });

我遇到的错误

  

错误TypeError：this.arc不是函数       在SVGPathElement上。 （forcast.component.ts：564）       在SVGPathElement上。 （attrTween.js：5）

我该如何解决。

Answer 1

在调用您赋予它的功能以更改选择的函数时，d3会将this变量更新为正在使用的DOM元素，这就是this不是您所对象的原因希望它包含在您的attrTween函数中。

一种解决方案是将委托传递给attrTween而不是函数。实际上，您已经在attr("fill", (d, i) => this.color(i))中进行了类似的操作（出于相似的原因）。在这里，this仍然是您期望的对象。

将此模式应用于您的用例，需要使用一些花括号来包含多行委托，例如：

      .attrTween("d", d => {
        var i = d3.interpolate(d.startAngle + 0.1, d.endAngle);
        return function(t) {
          d.endAngle = i(t);
          return this.arc(d);
        };
      })