D3 冰柱图中是否可以有多个 parent/root 节点?
Is it possible to have multiple parent/root nodes in a D3 Icicle plot?
我是 d3 的新手,目前正在研究 Icicle layout example。我有 2 个问题:
- 这个例子中是否可以有多个顶级节点?换句话说,我们可以有 3 个顶级节点("flare1"、"flare 2" 和 "flare 3"),而不是 "flare" 的单个顶级节点,然后可以有各自的子节点?我曾尝试将 json 数据导入为对象数组,但这没有用。
如果不可能有多个顶层节点,我如何隐藏根节点("flare")以便二级节点("vis","util" ,"animate") 好像是顶级节点?
- 我们如何根据节点在 json 文件中的位置而不是它们的大小对节点(在特定级别)进行排序?也就是说,我们如何对上面例子中的二级节点进行排序,使它们(从左到右)按照"analytics"、"cluster"、"graph"等顺序出现(它们在 json 文件中的顺序);而不是他们当前的顺序("vis"、"util"、"animate" 等)。
多个 parent/nodes 对于单个分区布局可能是不可能的,因为它是一个假定单亲关系的分层布局。但它应该可以使用由两个不同的分层 json 支持的两个分区布局来实现。您可以使用 d3.nest()
.
从单个平面数组中生成两个 json(即不同于 flare.json)
渲染代码可能也需要变得更复杂,以便它可以在 2 种布局之间进行协商。
对于 #2,您可以使用 partition.sort()
来随意订购它们。在您的情况下,您希望按输入数组中的索引进行排序。
更新
您可以相当简单地实现您所描述的内容——如果每个节点确实只有一个父节点。所以如果你想要顶部的 3 个节点,它们仍然需要在一个公共父节点中是 "wrapped",你将它传递给分区布局。然后,您需要注意不要渲染父节点,方法是在绑定和附加 DOM 节点之前将其过滤掉,或者将其设置为显示 none。在任何一种情况下,您都可以检查是否 d.depth == 0
来识别根节点。而且您还需要平移所有节点以解决丢失的根节点留下的间隙,因为布局将设置所有 x 和 y 坐标,就好像根节点在布局中一样。 (也许有一种方法可以让布局 "realize" 在分配 x 和 y 位置时根节点消失,如果您使用 .size()
函数将 return 0 用于根节点)。
我是 d3 的新手,目前正在研究 Icicle layout example。我有 2 个问题:
- 这个例子中是否可以有多个顶级节点?换句话说,我们可以有 3 个顶级节点("flare1"、"flare 2" 和 "flare 3"),而不是 "flare" 的单个顶级节点,然后可以有各自的子节点?我曾尝试将 json 数据导入为对象数组,但这没有用。
如果不可能有多个顶层节点,我如何隐藏根节点("flare")以便二级节点("vis","util" ,"animate") 好像是顶级节点?
- 我们如何根据节点在 json 文件中的位置而不是它们的大小对节点(在特定级别)进行排序?也就是说,我们如何对上面例子中的二级节点进行排序,使它们(从左到右)按照"analytics"、"cluster"、"graph"等顺序出现(它们在 json 文件中的顺序);而不是他们当前的顺序("vis"、"util"、"animate" 等)。
多个 parent/nodes 对于单个分区布局可能是不可能的,因为它是一个假定单亲关系的分层布局。但它应该可以使用由两个不同的分层 json 支持的两个分区布局来实现。您可以使用 d3.nest()
.
渲染代码可能也需要变得更复杂,以便它可以在 2 种布局之间进行协商。
对于 #2,您可以使用 partition.sort()
来随意订购它们。在您的情况下,您希望按输入数组中的索引进行排序。
更新
您可以相当简单地实现您所描述的内容——如果每个节点确实只有一个父节点。所以如果你想要顶部的 3 个节点,它们仍然需要在一个公共父节点中是 "wrapped",你将它传递给分区布局。然后,您需要注意不要渲染父节点,方法是在绑定和附加 DOM 节点之前将其过滤掉,或者将其设置为显示 none。在任何一种情况下,您都可以检查是否 d.depth == 0
来识别根节点。而且您还需要平移所有节点以解决丢失的根节点留下的间隙,因为布局将设置所有 x 和 y 坐标,就好像根节点在布局中一样。 (也许有一种方法可以让布局 "realize" 在分配 x 和 y 位置时根节点消失,如果您使用 .size()
函数将 return 0 用于根节点)。