d3.jsパスd属性

Question

私は新しいd3ユーザーです。私はd3.arc()によって作成されたパスのアニメーションを作成したいと思います。

私の問題は、g要素のmouseoverイベントがトリガされたときに、パスにSVG Mパスの代わりにJavaScript関数が割り当てられることです。

結果に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

私はこの問題を解決しました。 関数 'arcs'にあります。この変種の代わりに私は試みました： var arc = d3.arc（）、そしてarc（）を返します