如何使用自定义子节点创建D3.js树布局?

时间:2012-07-17 15:38:48

标签: d3.js

我想要想象一系列分层子弹图。具体来说,我希望能够点击我的顶级类别子弹图,并将它们扩展到子主题细分中,并为每个子主题添加项目符号图。

所以基本上,我想重新创建这个D3树的例子:     http://mbostock.github.com/d3/talk/20111018/tree.html

但是每个节点都是子弹图而不是圆形:     http://mbostock.github.com/d3/ex/bullet.html

我是D3的新手,所以即使查看示例源代码,我也不知道从哪里开始。

1 个答案:

答案 0 :(得分:1)

关键是画布就像一个真正的二维绘图画布。作为可视化控件的作者,您可以在画布上放置任何对象。您需要担心两件事... 1)确保您拥有在画布上的特定点实现可视化所需的所有数据,以及2)了解如何以您希望的方式绘制可视化渲染它,你想在画布上渲染它。

在将图表与树的节点混合的情况下,节点充当图表放置的参考点。您会很快注意到,由于画布混乱,您拥有的节点越多,渲染图表就越困难。换句话说,您将动态地在树元素(节点和分支)上绘制图表。您可能需要考虑渲染与画布的另一个区域中的节点相关的图表,该节点不与树形可视化(例如画布的左上角或左下角)竞争。因此,例如,如果将鼠标悬停在某个节点上,该节点会更改大小和/或颜色和/或形状以显示它当前处于“上下文”中,同时您会看到相应的子弹图(或任何其他相关信息) )在一个清晰整洁的屏幕区域(例如在图的左上角,远离树的“蔓延”,随着树的进一步向右延伸,树的“蔓延”变得越来越混乱。画布(假设树从左到右增长)。这样做可以确保任何一幅画或任何其他画之间没有杂乱的阻挡。保持悬停在一个区域内的节点上绘制的子弹图不与树竞争的画布意味着每次图表在特定树元素上绘制时,您不必“重绘”被阻挡的树的元素,如果您将图表“绘制”,则会出现这种情况树元素“。

无论如何,我希望这会有所帮助。

我最好,