動態編輯值

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舉例說明，整個過程要簡單得多。