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; 
    });