动态编辑值

Dynamically edit value

本文关键字：编辑 动态      更新时间：2023-09-26

我试着玩一下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");

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

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

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

这假定您已将类"outer"分配给要更改的路径，以便能够区分此路径和其他路径。

如果您使用更常见的圆环图模式，整个过程会容易得多，请参阅此处的示例。

相关文章：