d3.js 是否支持动态 Sunbursts

Question

我想创建一个从

看到的功能的混搭

http://bl.ocks.org/4063423 和 http://philogb.github.com/jit/static/v20/Jit/Examples/Sunburst/example2.html

我想使用 d3.js 或至少一个纯 javascript 解决方案，但该解决方案将响应鼠标点击以显示有关所选部分的更多信息。

放大和缩小不是强制性的，但如果我能做到，那就太好了。

现在我的问题是，是否有一个框架可以支持这一点，还是我必须自己将它们混合起来。

免责声明：谷歌没有那么有帮助！

Answer 1

单独使用 D3 很容易：http://bl.ocks.org/4678148 如果您单击任何元素，该元素将聚焦并转换为 90 度，并在其上设置 selected 类。

此外，右上角的图例文本会更改为所选元素的名称。实现这种耦合的部分代码是：

d3.selectAll("path").on("click", function (d, i) {
  var newAngle = - (d.x + d.dx / 2);

  innerG
    .transition()
      .duration(1500)
      .attr("transform", "rotate(" + (180 / Math.PI * newAngle) + ")");

  // Set the class "selected" on the chosen element.
  path
    .classed("selected", function (x) { return d.name == x.name; });

  // Update the text box with the right context
  // This can be arbitrarily complex to show as many details about the
  // object as required.
  textBox.data(["Clicked: " + d.name])
      .text(String);
});

---

更新

对于可缩放的行为，例如单击的元素过渡到中心，您可以使用与 here 或 here 几乎相同的代码。我对代码做了一些小改动，以显示如何提取有关单击了哪个项目的信息：http://bl.ocks.org/4747342

所需的代码更改比以前更简单：

d3.selectAll("path").on("click", function (d, i) {  

  // Zooming
  path.transition()
    .duration(750)
    .attrTween("d", arcTween(d));

  // Update the text box with the right context
  // This can be arbitrarily complex to show as many details about the
  // object as required.
  textBox.data(["Clicked: " + d.name])
      .text(String);
});