Javascript 如何扩展d3形状？

假设我具备以下条件：

var vis = d3.select('svg')
    .attr({width: 400, height: 400});

var arc = d3.svg.arc()
    .innerRadius(50)
    .outerRadius(70)
    .startAngle(45 * (Math.PI/180)) //converting from degs to radians
    .endAngle(3) //just radians

var arc2 = d3.svg.arc()
    .innerRadius(50)
    .outerRadius(30)
    .startAngle(180 * (Math.PI/180)) //converting from degs to radians
    .endAngle(5) //just radians

var position = [200,200];

如何使鼠标在单个弧上移动时，使其自身和另一个弧同时放大。当我说放大，我的意思是内半径和外半径在鼠标上变大，在鼠标上缩小到原来的大小

我尝试使用以下方法使单个圆弧展开：

arc.on("mouseover", function() {
   arc.innerRadius(40);
   arc.outerRadius(90);
});

---

虽然它似乎没有任何效果。我做错了什么？

首先，您需要将弧实际附加到SVG：

var arcPath = vis.append("path")
    .attr("d", arc);

这样做，您可以看到arc函数只生成一个SVG路径字符串，您可以将其设置为路径的

d

属性。因此，在鼠标悬停时，需要更新路径的

d

属性。例如，您可以执行以下操作：

var arcHover = d3.svg.arc()
    .innerRadius(40)
    .outerRadius(90)
    .startAngle(45 * (Math.PI/180))
    .endAngle(3);

arcPath.on("mouseover", function(e) {
    arcPath.attr("d", arcHover);
});

下面是一个工作示例：