Question

我试着用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的{{1}}上，顺利地改变visu的{{1}}。我暂时坚持下去，所以如果你可以帮忙:)。

Answer 1

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

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

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

如果您使用更常见的甜甜圈图表模式，整个过程会更容易，请参阅here作为示例。

动态编辑值

1 个答案: