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

Question

我想可视化一系列分层的子弹图。具体来说，我希望能够单击我的顶级类别项目符号图，并将它们扩展到子主题细分中，每个子主题都有一个项目符号图。

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

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

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

Answer 1

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

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

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

我最好的，

弗兰克