D3 JavaScript 可视化库有自己的 hierarchical structures 实现和 trees .
节点存储对其父级 (node.parent) 的引用和对其子级数组 (node.children) 的引用,以及它们在树中的深度/高度。
D3 还提供了 inorder/preorder/breath-first 的方法遍历
鉴于此,访问节点最右/最左表兄弟的最有效方法是什么?
对于树:
root
/ \
a b c d
/\ /\ /\ /\
e fg hi jk l
f 的最左表兄弟是 g,c 的最右表兄弟> 是b
最佳答案
基于 D3 树的一个简单特征,有一种简单的方法可以获取一行中给定节点左侧和右侧的节点:在该行中,节点遵循序列 在 descendants
数组中。
让我们看看使用this bl.ocks 。不幸的是,我必须使用 bl.ocks,因为如果我尝试 console.log
D3 选择,Stack Overflow 代码段将会卡住(注意:bl.ocks 不是我的,我只是在网上找到的) )。
因此,在 bl.ocks 中,如您所见,最后一行是:
Son of A - Daughter of A - Son of B - Daughter of B - Son#2 of B
让我们获取一个包含这些节点的数组(第三行,深度 = 2):
var row = nodes.descendants().filter(function(d) {
return d.depth === 2
});
现在我们有一个数组,其中包含最后一行中的所有节点(5 个元素)。
假设我们想找到Son of B
的左右两边都有谁。首先,我们得到该特定节点:
var sonOfB = row.filter(function(d) {
return d.data.name === "Son of B"
});
现在是重要的部分:如果我们知道数组中该节点的索引...
row.indexOf(sonOfB[0])
...我们可以获得其左侧和右侧的节点:
var toTheLeft = row[row.indexOf(sonOfB[0]) - 1];
//to the left, subtract 1 -------------------^
var toTheRight = row[row.indexOf(sonOfB[0]) +1];
//to the right, add 1 -----------------------^
看看那个区 block 中的控制台。你会看到这个:
console.log("To the left: " + toTheLeft.data.name)
//returns "To the left: Daughter of A"
console.log("To the Right: " + toTheRight.data.name)
//returns "To the Right: Daughter of B"
PS:这是访问左/右节点的一种方式。我将避免谈论“最有效”的方式,因为它看起来非常基于意见。也许“最惯用的”方式是一个更好的问题,但即便如此,它还是值得怀疑的。
关于javascript - 对 d3 树中最右/最左表兄弟节点的最有效访问,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45722659/