d3可缩放的太阳爆发与工具提示调整百分比，因为它的过渡

Question

我基于这个例子创建了一个可缩放的日冕图。这是我的小提琴。我现在要做的是更新工具提示%值，以反映图表点击时的新值-例如，当点击"流量"时，在过渡之后，新的流量环应该显示一个工具提示，上面写着"100%"，并且"流量"的孩子将相应地调整他们的%值。当点击"卡车"时，它应该会调整为"100%"……等。请帮助! !

var path = g.append("path")
  .attr("d", arc)
  .style("fill", function(d) {
    return d.color;
  })
  .style("stroke", "white")
  .style("stroke-width", "1px")
  .on("click", click)
  .on("mouseover", function(d, i) {
    var totalSize = path.node().__data__.value;
    var percentage = Math.round((100 * d.value / totalSize) * 10) / 10;
    var percentageString = percentage + "%";
    tooltip.text(d.name + " " + percentageString)
      .style("opacity", 0.8)
      .style("left", (d3.event.pageX) + 0 + "px")
      .style("top", (d3.event.pageY) - 0 + "px");
  })
  .on("mouseout", function(d) {
    tooltip.style("opacity", 0);
  });
function click(d) {
  text.transition().attr("opacity", 0);
  path.transition()
    .duration(750)
    .attrTween("d", arcTween(d))
    .each("end", function(e, i) {
      if (e.x >= d.x && e.x < (d.x + d.dx)) {
        var arcText = d3.select(this.parentNode).select("text");
        arcText.transition().duration(750)
          .attr("opacity", 1)
          .attr("transform", function() {
            return "rotate(" + computeTextRotation(e) + ")"
          })
          .attr("x", function(d) {
            return y(d.y);
          });
       }
    })
  }

Answer 1

我的解决方案是创建一个变量:

var percentBase = 100;

在函数click内部，根据所单击路径的属性percent改变该变量:

percentBase = parseFloat(d.percent.split("%")[0]);

由于中心路径("Sources")没有这个属性，所以这也是必要的:

if(d.name == "Sources") percentBase = 100;

然后，在mouseover内部，我们使用这个percentBase来计算百分比。

这是你的小提琴:https://jsfiddle.net/8sh069ns/

在数学上有一些必要的调整，但现在这取决于你。