протоис магические свойства - PullRequest
Новая
       12

протоис магические свойства

0 голосов
/ 04 ноября 2011

Я довольно новичок в 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 передается?Я не могу понять поток цепи.

1 Ответ

0 голосов
/ 04 ноября 2011

Это одна из многих частей Protovis, которая сначала немного сбивает с толку. Когда вы добавляете данные к отметке, например ::100100 

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(), которые соответственно дублируют эту метку. Данные дочернего знака могут быть полностью независимыми, например ::1015* 

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