0

假设我有以下内容：

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在鼠标悬停时变大，并在鼠标移出时缩小到原始大小。

我试图使单个弧扩展使用：

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

虽然看起来一点效果都没有。我究竟做错了什么？

4

1 回答 1

1

首先，您需要将弧线实际附加到 SVG：

var arcPath = vis.append("path")
    .attr("d", arc);

这样做，您可以看到 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-09T06:51:12.383 回答