Question

问题：Arctween功能不适用于.on（＆＃34; mouseOver＆＃34;）。

意图：当将圆弧悬停在饼图中时，需要启动一个突出显示（不透明度等）和信息需要（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);
    });

}）;

Answer 1

您的arcTween会返回您需要致电的功能：

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

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

1 个答案: