Question

我根据this example创建了一个可缩放的旭日形图。到目前为止，这是我的fiddle。我现在要做的是更新工具提示％值以反映单击图表时的新值 - 例如，单击“流量”时，转换后，新的流量环应显示工具提示说“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/

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

d3 Zoomable Sunburst，工具提示在转换时调整％？

1 个答案: