D3 원형 차트 : mouseOver의 Arctween이 작동하지 않습니다.

Question

Problem : Arctween 함수가 .on ("mouseOver")에서 작동하지 않습니다.

의도 : 원형 차트에서 호를 가져갈 때 하이라이트는 시작해야하는 Arctween 옆에 강조 표시 (불투명 등) 및 정보 필요 (infoHover)가 필요합니다.

코드가 완벽하지 않다는 것을 알고 있습니다. 단지 d3.js로 실험하고 있습니다.

미리 감사드립니다.

자바 스크립트 :

d3.json("dataExample.json", function (data) { 

var width = 260, 
    height = 260; 

var outerRadius = height/2 - 20, 
    innerRadius = outerRadius/3, 
    cornerRadius = 10; 
    colors = d3.scale.category20c(); 
var tempColor; 

var pie = d3.layout.pie() 
    .padAngle(.02) 
    .value(function(d) {  
     return d.value; 
    }) 

var arc = d3.svg.arc() 
    .padRadius(outerRadius) 
    .innerRadius(innerRadius); 

var infoHover = d3.select('#chart').append('div') 
    .style('position', 'absolute') 
    .style('padding', '0 30px') 
    .style('opacity', 0) 

function arcTween(outerRadius, delay) { 
    return function() { 
    d3.select(this).transition().delay(delay).attrTween("d", function(d) { 
     var i = d3.interpolate(d.outerRadius, outerRadius); 
     return function(t) { d.outerRadius = i(t); return arc(d); }; 
    }); 
    }; 
} 

var svg = d3.select("#chart").append("svg") 
    .data(data) 
    .attr("width", width) 
    .attr("height", height) 
    .append("g") 
    .attr("transform", "translate(" + width/2 + "," + height/2 + ")") 
    .selectAll('path').data(pie(data)) 
    .enter().append('path') 
    .attr('fill', function(d, i) { 
     return colors(i); 
    }) 
    .each(function(d) { d.outerRadius = outerRadius - 20; }) 
    .attr('d', arc) 
    .on("mouseover", function(d) { 

     infoHover.transition() 
      .style('opacity', .9) 
      .style('left', '85px') 
      .style('top', '120px') 

     infoHover.html(d.value + '%') 

     d3.selectAll("path") 
      .transition() 
      .duration(500) 
      .style("opacity", .18) 

     d3.select(this) 
      .transition() 
      .duration(500) 
      .style('opacity', 1) 
      .style('cursor', 'pointer') 

     arcTween(outerRadius, 0); 
    }) 

    .on("mouseout", function(d) { 

     d3.selectAll("path") 
      .transition() 
      .duration(500) 
      .style("opacity", 1) 

     d3.select(this) 
      .style('opacity', 1) 

     arcTween(outerRadius - 20, 150); 
    }); 

});

Answer 1

귀하의 arcTween 반환하는 함수를 호출하는 당신의 필요 : 그것에 대해

arcTween(outerRadius, 0).call(this);