[英]Does d3.js support dynamic Sunbursts
I would like to create a mashup of the functionalities as seen from 我想创建功能的混搭,从
http://bl.ocks.org/4063423 and http://philogb.github.com/jit/static/v20/Jit/Examples/Sunburst/example2.html http://bl.ocks.org/4063423和http://philogb.github.com/jit/static/v20/Jit/Examples/Sunburst/example2.html
I would like to use d3.js or at least a pure javascript solution but a solution that will respond to mouse clicks to display more information about the selected section. 我想使用d3.js或至少使用纯javascript解决方案,但要使用一种可以响应鼠标单击以显示有关所选部分的更多信息的解决方案。
Zooming in and out is not mandatory, but if I can achieve it, it will be good. 放大和缩小不是强制性的,但是如果我能实现,那就很好。
Now my question, Is there a framework that can support this or do I have to mash them up on my own. 现在我的问题是,是否有一个框架可以支持这一点,还是我必须自己将它们混搭起来。
Disclaimer: google was not that helpful! 免责声明:谷歌不是那么有用!
It is easy to do with D3 alone: http://bl.ocks.org/4678148 If you click any element, the element will be focused and transitioned to 90 deg with the selected
class set on it. 仅使用D3即可轻松实现: http : //bl.ocks.org/4678148如果单击任何元素,则该元素将被聚焦并转换为90度,并在其上设置
selected
类。
Also, the legend text on the top right changes to the name of the element selected. 同样,右上角的图例文本将更改为所选元素的名称。 The part of code which achieves this coupling is:
实现这种耦合的代码部分是:
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);
});
Update 更新
For the zoomable behavior such that the clicked element transitions to the center, you can use almost the same code as used as here or here . 对于可缩放的行为(例如,单击的元素过渡到中心),可以使用与此处或此处相同的代码。 I have made small changes to the code to show how to extract information about which item was clicked: http://bl.ocks.org/4747342
我对代码进行了一些小的更改,以显示如何提取有关单击哪个项目的信息: http : //bl.ocks.org/4747342
The change in code required is simpler than before: 所需的代码更改比以前更简单:
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);
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.