javascript - D3饼图:mouseOver中的Arctween不起作用

问题：Arctween函数在.on（“ mouseOver”）上不起作用。

意图：在饼图中将弧形悬停时，需要突出显示（不透明度等），并且需要显示信息（infoHover），在我也要激活的Arctween旁边。

我知道代码根本不是完美的，我只是在尝试d3.js。

提前致谢！

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

}）;

最佳答案

您的arcTween返回一个您需要调用的函数：

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