javascript - 为什么 "d"在 attrTween 中未定义？

Question

我正在尝试在 d3 上创建一个接口(interface)。我找到了圆弧动画代码(http://bl.ocks.org/mbostock/5100636)，我想稍微改变一下(没有函数 arcTween())。这是我的部分代码:

            var arc3 = d3.arc().innerRadius(77).outerRadius(90).startAngle(0);
            var foregroundArc3 = imgs3
              .append('path')
              .attr('d', arc3)
              .attr('stroke', 'white')
              .attr('fill', 'white')
              .style('fill-opacity', 0.5)
              .attr('transform', 'translate('+(146.5)+','+(150.9)+')')
              .datum({endAngle: 0.0628*90, newAngle: 0.0628*270})
              .transition()
              .duration(1500)
              .attrTween('d',  (d) => {
                return (t) => {
                  const interpolate = d3.interpolate(d.endAngle, d.newAngle);
                    d.endAngle = interpolate(t);
                    return arc3(d);
                  };
          });

但是出现错误:Argument of type '{ endAngle: number; newAng:数字； }' 不可分配给 'DefaultArcObject' 类型的参数。类型 '{ endAngle: number; 中缺少属性 'innerRadius' newAng:数字； }'。

并且在浏览器的控制台中“d”是未定义的。我试图找到任何其他可行的解决方案，但无济于事。

Answer 1

当你这样做时......

.attr('d', arc3)

... attr 的第二个参数，即 arc3 函数，获取传递的绑定(bind)数据、索引和节点组。

但是，没有绑定(bind)数据，因为在您的代码中，datum 方法在之后。

最简单的解决方案是将 datum 移动到 .attr('d', arc3) 行之前:

var svg = d3.select("svg");
var arc3 = d3.arc().innerRadius(77).outerRadius(90).startAngle(0);
var foregroundArc3 = svg
  .append('path')
  .datum({
    endAngle: 0.0628 * 90,
    newAngle: 0.0628 * 270
  })
  .attr('d', arc3)
  .attr('fill', 'teal')
  .style('fill-opacity', 0.5)
  .attr('transform', 'translate(' + (146.5) + ',' + (150.9) + ')')
  .transition()
  .duration(1500)
  .attrTween('d', (d) => {
    return (t) => {
      const interpolate = d3.interpolate(d.endAngle, d.newAngle);
      d.endAngle = interpolate(t);
      return arc3(d);
    };
  });

<svg></svg>
<script src="https://d3js.org/d3.v5.min.js"></script>