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维数组作为其数据，而子对象的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;
    });