Question

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

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

从＆gt;＆gt;调用next variable来自＆gt;＆gt; newdata？
的render function

我刚刚设置了一个jsbin here

Answer 1

这部分：

.data(newData);

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

因此render中对setInterval的每次调用都只是将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;

Answer 2

首先，为了简化，这个

var selection = d3.select("#container").selectAll("div")
  .data(newData); // <- D

就像写作

var arrayOfFunctions = newData();
var selection = d3.select("#container").selectAll("div")
  .data(arrayOfFunctions); // <- D

因此，例如，调用此代码3次（通过setInterval）会构建arrayOfFunctions，如下所示：

arrayOfFunctions = [
  function (x) { return 15 + x * x; },
  function (x) { return 15 + x * x; },
  function (x) { return 15 + x * x; }
]

（注意：它不是那样的，因为实际上它们只是指向相同函数的指针next）

所以没有任何增加x。但是一旦它将这些函数绑定到DOM元素（通过data(arrayOfFunctions)并贯穿此位：

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

d为function (x) { return 15 + x * x; }，i（即0,1或2）在调用x时以d(i)的形式传递给该函数

这就是基本上增加x。

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

2 个答案: