如何展开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形状？

回答

相关问题