0

我正在尝试使用 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");

而我想做的是，在 的hover上visu，顺利地改变outerRadius的progbar。我现在有点坚持，所以如果你能帮忙:)

4

1 回答 1

2

使用您当前的代码，这实际上会有点棘手，因为您将甜甜圈分成两个单独的部分。一般模式是这样的。

visu.on("mouseover", function() {
  arcBorder.outerRadius(100);
  visu.selectAll("path.outer").transition().attr("d", arcBorder);
});

这假设您已将“外部”类分配给要更改的路径，以便能够区分此路径和其他路径。

如果您使用更常见的甜甜圈图模式，整个事情会容易得多，请参见此处的示例。

于 2013-11-03T15:10:14.760 回答