d3.js是否支持动态Sunbursts

时间:2013-01-30 14:28:12

标签: javascript d3.js sunburst-diagram

我想从

中创建一个功能的mashup

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

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

放大和缩小不是强制性的,但是如果我能够实现它,它就会很好。

现在我的问题是,是否有一个可以支持这个的框架,或者我必须自己将它们混为一谈。

免责声明:谷歌没那么有用!

1 个答案:

答案 0 :(得分: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);
});

<强>更新

对于可缩放的行为,点击的元素转换到中心,您可以使用与herehere几乎相同的代码。我对代码进行了少量更改,以显示如何提取有关单击哪个项目的信息: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);
});