动态编辑值

Question

我试着打了一下与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"); 

什么I'ld想要做的是，对visu的hover，顺利改变progbar的outerRadius。我现在有点困难，所以如果你能帮助:)

Answer 1

随着你现在的代码，这实际上会有点棘手，因为你在两个独立的部分绘制甜甜圈。一般模式会是这样的。

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

这里假设你已经将类“outer”分配给了你想要改变的路径，以便能够区分这个和其他的路径。

如果您使用更常见的甜甜圈图案，请参阅here举例说明，整个过程要简单得多。