javascript - 在 D3.js 中调用函数作为数据

Question

我刚刚开始使用 d3.js 并正在 github 上浏览 Nick 的源代码 here并卡在他将函数作为数据传递给 d3.js 的部分。

分配给 next var 的函数中的 var x 从 0 递增到 loop counter 正如我在下面的 jsbin 链接中所示.我无法完全理解 x 如何自动递增以及它如何知道它需要每次递增的循环计数器。

the next variable is called from >> newdata from the >>render function ?

我刚刚设置了一个 jsbin here

Answer 1

这部分:

.data(newData); 

只是调用 newData 函数并将返回绑定(bind)到选择。

所以每次调用 setInterval 中的 render 只是将 next 函数插入他的 data 数组。

然后这部分:

selection.attr("class", "v-bar")
    .style("height", function (d, i) {
        return d(i) + "px"; // <- E
    })
    .select("span")
        .text(function(d, i){ 
            return d(i); // <- F
    }); 

调用 d，它是数据数组中每个元素的 next 函数。它正在传递 data 数组中的索引位置。

所以第一个 render 调用是:

 15 + 0 * 0;

第二个是:

 15 + 0 * 0;
 15 + 1 * 1;

第三个是:

 15 + 0 * 0;
 15 + 1 * 1;
 15 + 2 * 2;