d3.js 路径 d 属性

Question

我是 d3 的新用户。我想为d3.arc() 创建的路径创建动画。

我的问题是，当 g 元素上的 mouseover 事件被触发时，该路径被分配了一个 JavaScript 函数而不是 SVG M 路径。

我认为问题在于我在结果中返回 arcs() 时使用了 arcTween() 函数。

            var outerData = [
  [{outerRadius: 90, innerRadius: 74, cornerRadius: 5, startAngle: 0, endAngle: -5.34071}],
  [{outerRadius: 90, innerRadius: 74, cornerRadius: 5, startAngle: 0, endAngle: -1.5708}],
  [{outerRadius: 90, innerRadius: 74, cornerRadius: 5, startAngle: 0, endAngle: -3.76991}],
  [{outerRadius: 90, innerRadius: 74, cornerRadius: 5, startAngle: 0, endAngle: 2 * Math.PI}],
];

function arcs(innerRadius, outerRadius, cornerRadius, startAngle, endAngle) {
  return d3.arc()
      .innerRadius(innerRadius)
      .outerRadius(outerRadius)
      .cornerRadius(cornerRadius)
      .startAngle(startAngle)
      .endAngle(endAngle);
}

var svg = d3.selectAll('svg');

var path = svg.select('g')
    .data(outerData)
    .each(function (d) {
      d3.select(this)
          .append('path')
          .attr('d', arcs(
              d[0].innerRadius,
              d[0].outerRadius,
              d[0].cornerRadius,
              d[0].startAngle,
              d[0].endAngle))
          .attr("transform", "translate(90, 90)")
    })

svg.select('g').on('mouseover', function (d) {

d3.select(this).select('path')
        .transition()
        .duration(750)
.attrTween("d", arcTween(-4))
})

function arcTween(newAngle) {
  return function (d) {

    var interpolate = d3.interpolate(d[0].endAngle, newAngle);

    return function (t) {

      d[0].endAngle = interpolate(t);

      return arcs(
          d[0].innerRadius,
          d[0].outerRadius,
          d[0].cornerRadius,
          d[0].startAngle,
          d[0].endAngle);
    };
  };
}

有什么想法吗？

Answer 1

我解决了这个问题。 在函数“弧”中。而不是这个变种我试过： var arc = d3.arc()，然后返回arc()