D3 Icicle 图中是否可以有多个父/根节点？

Question

我是 d3 的新手，目前正在使用 Icicle layout example。我有两个问题：

1. 在这个例子中是否可以有多个顶级节点？换句话说，我们可以有 3 个顶级节点（“flare1”、“flare 2”和“flare 3”），而不是“flare”的单个顶级节点，然后它们可以有各自的子节点吗？我尝试将 json 数据作为对象数组导入，但没有成功。

如果不可能有多个顶级节点，我该如何隐藏根节点（“flare”），以便第二级节点（“vis”、“util”、“animate”）看起来像顶级节点？

1. 我们如何根据节点在 json 文件中的位置而不是大小对节点（在特定级别上）进行排序？换句话说，我们如何对上例中的二级节点进行排序，使它们按照“分析”、“集群”、“图形”等顺序出现（从左到右）（它们在 json 文件中的顺序） );而不是它们当前的顺序（“vis”、“util”、“animate”等）。

Answer 1

单个分区布局可能无法实现多个父/节点，因为它是假定单父关系的分层布局。但这应该可以使用由两个不同分层 json 支持的两个分区布局来实现。您可以使用d3.nest()，从单个平面数组（即与flare.json 不同）生成两个json。

渲染代码也可能需要变得更复杂，以便它可以在两种布局之间进行协商。

对于#2，您可以使用partition.sort() 来订购您想要的任何东西。在您的情况下，您希望按它们在输入数组中的索引进行排序。

更新

你可以很简单地实现你所描述的——如果每个节点真的只有一个父节点。因此，如果您希望顶部有 3 个节点，它们仍然需要“包装”在一个共同的父节点中，然后将其传递给分区布局。然后，您需要注意不渲染父节点，方法是在绑定和附加 DOM 节点之前将其过滤掉，或者将其设置为不显示。无论哪种情况，您都可以检查d.depth == 0 是否可以识别根节点。并且您还需要将所有节点向上平移以解决丢失的根节点留下的间隙，因为布局将设置所有 x 和 y 坐标，就好像根节点在布局中一样。 （如果您使用.size() 函数为根节点返回 0，那么在分配 x 和 y 位置时，也许有一种方法可以让布局“意识到”根节点消失了）。