d3.js - 如何在 d3 中使用 .each？

Question

您能向我解释一下为什么第一个脚本不起作用吗？ Firebug 说“d 未定义”。selectall之后val是一个二维数组。

<script type="text/javascript">
        setInterval(function() {
            d3.json("./cgi-bin/script1.sh?shmid=" + node.value, function(error, txt){
                if (error) return console.warn(error);

                table = d3.select("#shmid" + node.value);
                val = table.selectAll(".val")

                val.each(function(d,i){
                    console.debug(d,i)
                    d.text(txt.bd[i].val);
                });

                node = node.next;
            })
        }, 500);

    </script>

工作变体:

<script type="text/javascript">
        setInterval(function() {
            d3.json("./cgi-bin/script1.sh?shmid=" + node.value, function(error, txt){
                if (error) return console.warn(error);

                table = d3.select("#shmid" + node.value);
                val = table.selectAll(".val")

                val.each(function(d,i){
                    console.debug(d,i)
                    d3.select(this).text(txt.bd[i].val);
                });

                node = node.next;
            })
        }, 500);

    </script>

Answer 1

来自 the documentation :

Invokes the specified function for each element in the current selection, passing in the current datum d and index i, with the this context of the current DOM element.

在第一种情况下，您错误地使用了 d —— 它指的是绑定(bind)到元素的数据，而不是元素本身。在你的例子中，你没有绑定(bind)任何数据，所以没有什么可引用的。

看起来您正在尝试执行以下操作:

table = d3.select("#shmid" + node.value);
table.selectAll(".val").data(txt.bd)
     .text(function(d) { return d.val; });

这将首先将数据绑定(bind)到您正在使用的元素，然后使用绑定(bind)的数据设置文本。