protovis 마법의 속성

Question

나는 protovis에 꽤 새로 왔습니다. 나는이 예제를 이해하려고 애썼다. http://mbostock.github.com/protovis/docs/panel.htmlleft(function() this.index * 10)이 실제로는 left(function(){return this.index * 10;})이고, 함수가 호출 될 때 범위가 전달된다. this 지금까지는 잘되었다. data(function(array) array)은 this에서 배열을 가져 오지 않습니다. 오히려 그것으로 전달됩니다. 여기서부터 array이 전달됩니까? 나는 사슬의 흐름을 이해할 수 없다.

Answer 1

이것은 Protovis의 많은 부분 중 처음에는 다소 혼란 스럽습니다. 당신은 마크, 예를 들어, 데이터를 추가 할 때 :

마크가 data 배열의 각 항목에 대해 한 번 복제하고, 예를 들어 그 기능에 대한 첫 번째 인수로 해당 항목을 전달됩니다

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

:

new pv.Panel() 
    .data([1,2,3]) 
    .title(function(d) { // <-- d is 1, 2, or 3 
     return d; 
    }); 

,754,661 :

당신이 mark에 부착 자식 마크는 다음 의 기능에 대한 입력 인수로 아이 마크에서 사용할 수있는이 데이터 포인트, 예를 받게됩니다3210

그러나 어린이 기호는 자신의 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; 
    });