調用函數作爲D3.js中的數據

Question

我剛剛開始使用d3.js，並且正在通過github上的Nick源代碼here，並被卡在他將函數作爲數據傳遞到d3.js的部分。

分配給next var的函數中的var x從0遞增到loop counter，如我在下面的jsbin鏈接中所示。我不知道x是如何自動遞增的，以及它如何知道循環計數器，它每次都需要遞增。

的next variable從>>newdata從>>render function叫什麼？

我只是設置一個jsbin here

Answer 1

這一部分：

.data(newData); 

只不過想調用newData功能和綁定返回的選擇。

因此，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; 

Answer 2

首先，爲了簡化，這

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

就像是（通過setInterval的）寫

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

因此，例如，調用此代碼3倍建立起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