protovis 魔法属性

Question

我对 protovis 很陌生。我试图理解http://mbostock.github.com/protovis/docs/panel.html 中的示例我可以理解left(function() this.index * 10)实际上是left(function(){return this.index * 10;})，当函数被调用时，一个作用域被传递给它this，直到现在都很好。但是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 的任何子标记也将收到此数据点，然后子标记可以将其用作 its 函数的输入参数，例如：

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