Javascript 动态编辑值

我试着玩一下d3.js，现在有点喜欢它：）

有一件事我搞不懂，那就是如何在飞行中编辑相同的值。让我解释一下，这里有一个简单的甜甜圈：

var visu = d3.select("#svg_donut");
var skillScale = d3.scale.linear().domain([0, 100]).range([0, 2*Math.PI]);
var arcBorder = d3.svg.arc().innerRadius(60)
                      .outerRadius(62)
                      .startAngle(0);
var arcBar = d3.svg.arc().innerRadius(60)
                           .outerRadius(70)
                           .startAngle(0);
var progBorder = visu.append("path").datum({endAngle: skillScale(100)})
                             .style("fill", "white")
                             .attr("d", arcBorder)
                             .attr("transform", "translate(75, 75)");
var progBar = visu.append("path").datum({endAngle: skillScale(75)})
                                  .style("fill", "white")
                                  .attr("d", arcBar)
                                  .attr("transform", "translate(75, 75)");
var text = visu.append("text").text("FOO")
                             .attr("transform", "translate(75, 83)")
                             .style("fill", "white")
                             .attr("text-anchor", "middle");

---

我想做的是，在

visu

的

悬停

上，平滑地更改

程序条的
外部
。我现在有点迷糊了，所以如果你能帮我：）
用你当前的代码，这实际上有点棘手，因为你要把甜甜圈分成两部分。一般的模式是这样的

visu.on("mouseover", function() {
  arcBorder.outerRadius(100);
  visu.selectAll("path.outer").transition().attr("d", arcBorder);
});

这假设您已将类“outer”指定给要更改的路径，以便能够区分此路径和其他路径

如果您对甜甜圈图表使用更常见的模式，整个过程就会简单得多，请参见示例。
第二个甜甜圈只是用来装饰的，没有它也可以工作。好奇的是，如果你删除了
arcBorder
和
progBorder
，我的画法有什么奇怪的？我真的很难想象你的代码会产生什么。我以为你在某种程度上把这两种甜甜圈结合起来了。如果你不是，那肯定会让事情变得更容易：）结果是，第二个圆弧只是为了装饰（我知道，一个简单的圆也可以：））好的，那么用
arcBorder
替换我答案中的
arcBar
。jsiddle还应该向您展示一般模式：）好的，我将介绍您的解决方案以及jsiddle。谢谢：）