protovis神奇屬性

Question

我對protovis很新。我試圖瞭解http://mbostock.github.com/protovis/docs/panel.html的例子，我可以理解left(function() this.index * 10)實際上是left(function(){return this.index * 10;})當函數被調用時，範圍被傳遞給它this很好，直到現在。 BUt data(function(array) array)不接受來自this的數組。而是傳遞給它。從這個array通過？我無法理解鏈條的流動。

Answer 1

這是Protovis的許多部分之一，起初有點令人困惑。當您將數據添加到一個標記，如：

var mark = new pv.Panel() 
    .data([1,2,3]); 

的標誌將是data陣列中的每個項目複製一次，並通過了相應的項目作爲第一個參數的功能，例如：

new pv.Panel() 
    .data([1,2,3]) 
    .title(function(d) { // <-- d is 1, 2, or 3 
     return d; 
    }); 

附加到mark任何子標誌也將收到這個數據點，然後可以通過孩子的標記被用作其功能的輸入參數，如：

new pv.Panel() 
    .data([1,2,3]) 
    .add(pv.Label) 
    .text(function(d) { // <-- d is 1, 2, or 3 
     return d; 
    }); 

但是，子標記也可以定義自己的data()，它將相應地複製該標記。一種兒童標記的數據可以是完全獨立的，例如：

new pv.Panel() 
    .data([1,2,3]) 
    .add(pv.Label) 
    .data([3,4,5]) 
    .text(function(d) { // <-- d is 3, 4, or 5 
     return d; 
    }); 

但通常，如在鏈接到該示例中，父將具有2或3 d數組作爲它的數據，而子將基地它通過的子陣列上的data()：

new pv.Panel() 
    .data([[1,2,3], [3,4,5]]) 
    .add(pv.Label) 
    .data(function(d) { // <-- d is [1,2,3] or [3,4,5] 
     return d; 
    }) 
    .text(function(d) { // <-- d is either 1, 2, or 3, 
         // OR 3, 4, or 5 
     return d; 
    });