D3.js node.eachBefore()函数

node.eachBefore()函数用于为每个节点调用特定函数，但按前序遍历顺序。它以遍历前的顺序访问每个节点，并对该特定节点及其每个后代执行操作。

句法：

node.eachBefore(function);

参数：此函数接受如上所述和如下所述的单个参数：

• 函数：这是要为每个节点调用的函数。

返回值：此函数不返回任何内容。

示例 1：

HTML

  

    
  
    
  
    
    

  

    
  
        // Constructing a tree
        var tree = {
            // Root node
            name: "rootNode",
            children: [
                {
                    // Child of root node
                    name: "child1",
                    value: 2
                },
                {
                    // Child of root node
                    name: "child2",
                    value: 3,
                    children: [
                        {
                            // Child of child2
                            name: "grandchild1",
                            value: 1,
                            children: [
                                {
                                    // Child of grandchild1
                                    name: "grand_granchild1_1",
                                    value: 4
                                },
                                {
                                    // Child of grandchild1
                                    name: "grand_granchild1_2",
                                    value: 5
                                }
                            ]
                        },
                        {
                            name: "grandchild2",
                            children: [
                                {
                                    // Child of grandchild2
                                    name: "grand_granchild2_1"
                                },
                                {
                                    // Child of grandchild2
                                    name: "grand_granchild2_2"
                                }
                            ]
                        }
                    ]
                }
            ]
        };
  
        var obj = d3.hierarchy(tree);
  
        const BFS = [];
  
        obj.eachBefore(d => BFS.push
            (
                " ".repeat(d.depth) 
                    + `${d.depth}: ${d.data.name}`
            ));
  
        BFS.forEach((e) => {
            console.log("level:", e);
        })
    

  

输出：

示例 2：

HTML

  

    
    
  
    
    

  

    
        var obj = d3.hierarchy({
            // Root node
            name: "rootNode",
            children: [
                {
                    // Child of root node
                    name: "child1",
                    value: 2
                },
                {
                    // Child of root node
                    name: "child2",
                    value: 3,
                    children: [
                        {
                            // Child of child2
                            name: "grandchild1",
                            value: 1,
                            children: [{
                                // Child of grandchild1
                                name: "grand_granchild1_1",
                                value: 4
                            },
  
                            {
                                // Child of grandchild1
                                name: "grand_granchild1_2",
                                value: 5
                            }]
                        }
                    ]
                }
            ]
        });
  
        const BFS = [];
  
        obj.eachBefore(d => BFS.push
            (
                " ".repeat(d.depth) 
                    + `${d.depth}: ${d.data.name}`
            ));
  
        console.log(BFS);
    

  

输出：