D3饼图：mouseOver中的Arctween不起作用

Question

Problem: The Arctween function will not work on the .on("mouseOver").

Intention: When hovering the arcs in the Pie Chart a highlight needs to start (opacity etc.) and information needs (infoHover) to show, next to the Arctween that I also want to activate.

I am aware that the code is not perfect at all, I'm just experimenting with d3.js.

Thanks in advance!

Javascript:

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);