如何在D3.js和HTML中使用鼠标悬停来增加Arc

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

到您的馅饼，之后您可以d3.interpolate使用.attrTween 通过这样的过渡来增加弧的大小：

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