如何展開d3形狀？

假設我有以下幾點：如何展開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];

我讓這樣怎麼辦鼠標放在一個圓弧時，它會導致本身和其他弧放大爲好。當我說放大時，我的意思是innerRadius和outerRadius在mouseover上變得更大，並且在鼠標移出時縮回到原始大小。

我試圖使一個單一的圓弧使用擴展：

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

雖然它似乎沒有任何效果可言。我究竟做錯了什麼？

來源

2013-03-09 Setsuna

首先，您需要將您的弧線實際上追加到SVG：

var arcPath = vis.append("path") 
    .attr("d", 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); 
});

這裏有一個工作示例：http://jsfiddle.net/XaszF/

來源

2013-03-09 06:51:12

如何展開d3形狀？

回答

相關問題