D3.js selection.each()函数

D3.js 中的selection.each()函数用于为每个选定的 HTML 元素调用特定的函数。在函数中 datum(d) 和 index(i) 作为参数给出。通过使用这种方法，可以同时访问父数据和子数据。

句法：

selection.each(callback);

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

• 回调：这是每个选定元素调用的函数。

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

下面给出了上面给出的函数的几个例子。

示例 1：

HTML

    
        
        
          D3.js selection.each() Function
    
    
        .div {
            width: 200px;
            height: 200px;
            background-color: green;
            overflow: hidden;
        }
        div {
            background-color: red;
            width: 10px;
            height: 10px;
        }
    
    
        
            Geeks for geeks
            Some text
        
        
            List tag
            each function
        
        Click me
        
        
        
        
        
            let btn = document.querySelector("button");
            let func = () => {
                let p = d3.selectAll("ul");
                p.each(function (p, j) {
                    d3.select(this)
                        .selectAll("li")
                        .text(function (d, i) {
                            return "child are edited.";
                        });
                });
            };
            btn.addEventListener("click", func);
        
    

输出：

在点击按钮之前：

点击按钮后：

示例 2：

HTML

    
        
        
        D3.js selection.each() Function
    
    
        div {
            background-color: green;
            margin-bottom: 5px;
            padding: 10px;
            width: fit-content;
        }
    
    
        Some text
        Geeks
        Geeks for geeks
        Some text
        Click me
        
        
        
        
        
            let btn = document.querySelector("button");
            let func = () => {
                let p = d3.selectAll("div");
                console.log(p);
                p.each(function (p, j) {
                    console.log("p: " + p, "j: " + j);
                    d3.select(this).text(function (d, i) {
                        return "DIVs are edited.";
                    });
                });
            };
            btn.addEventListener("click", func);
        
    

输出：

在点击按钮之前：

点击按钮后：