Question

假设我有以下内容：

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);
});

虽然它似乎根本没有效果。我做错了什么？

Answer 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/

如何扩展d3形状？

1 个答案: