scope - protovis 魔法属性

Question

我对protovis很陌生。我试图理解http://mbostock.github.com/protovis/docs/panel.html中的示例，我可以理解left(function() this.index * 10)实际上是left(function(){return this.index * 10;}) ，当函数被调用时，一个范围被传递给它this，直到现在都很好。BUtdata(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 维数组作为其数据，而子级将基于它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;
    });