javascript - 对 d3 树中最右/最左表兄弟节点的最有效访问

Question

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

Answer 1

基于 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:这是访问左/右节点的一种方式。我将避免谈论“最有效”的方式，因为它看起来非常基于意见。也许“最惯用的”方式是一个更好的问题，但即便如此，它还是值得怀疑的。