d3.js - 父级值大于子级总和的树形图

Question

我正在尝试使用 d3.js 显示一个树形图，其中父级的值可能大于其子级的总和。例如，假设我正在可视化命名空间层次结构中的代码行。命名空间 B 和 C 是 A 的子级，各占 1 行。命名空间 A 是 3 行 - B 和 C 1 行，自身 1 行。因此，B 和 C 本身并不能决定 A 的大小。

我想在树形图上显示此属性。特别是，父级应该是大小正确成比例的子级矩形之上的一个矩形。如果父级没有添加任何额外的大小，则父级仍应显示，但尺寸最小（可能是跨越子级顶部的一个小矩形，只是为了指示父级名称）。

目前，子值节点只是在层次结构中向上传播，而不考虑非叶节点的实际大小。

我想要 d3.js 中的解决方案，因为这是我在其余代码中使用的库，但如果它解决了问题，我愿意接受另一个框架。

谢谢。

Answer 1

您可能想尝试pull request #574，它允许内部层次结构节点具有价值。

否则，您可以将不可见的虚拟节点添加到您的数据中，这些节点包含与内部节点相关联但未被其子节点考虑的额外值。渲染树形图时，您可以filter 这些节点以防止它们被显示（即使它们是布局的一部分）。或者您可以将它们的样式设置为显示：无。