javascript - 如何在 D3.js 和 HTML 中增加鼠标悬停时的圆弧

Question

我希望弧线在鼠标悬停时增长。我的代码是:

.on("mousemove", function(d) {
d3.select(this)
           .transition()
           .duration(200)
           .attr("d", arcOver);
}

var arcOver = d3.svg.arc()
            .outerRadius(radius + 10);

我做错了什么？谢谢!

Here's my code on JSFiddle.

Answer 1

有几点，您应该从圆弧中删除 .outerRadius(radius - 10) 并像这样添加它:

.each(function(d) { d.outerRadius = outerRadius - 10; });

到你的馅饼，之后你可以在 .attrTween 上使用 d3.interpolate通过这样的过渡来增加圆弧大小:

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

这是您的代码的分支:Plunker