d3.js路径d属性

Question

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

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

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

            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

我解决了这个问题。 在函数＆＃39; arcs＆＃39;。我没有试过这个变种： var arc = d3.arc（），然后返回arc（）