scope - プロトビスの魔法の特性

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 の多くの部分の 1 つです。マークにデータを追加すると、次のようになります。

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

マークは配列内の項目ごとに 1 回複製され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;
    });