D3 - 여러 개체에 동일한 데이터를 바인딩하는 방법?

Question

내가 선택에서 동일한 데이터를 사용하여 여러 모양을 그릴려고, 그래서 내가 가진 가정 해 봅시다 오전 :

여기

myData = [ 
    { 
     shape: 'rect', 
     attr: { width: 100, height: 100, x: 100, y:100 } 
    } , { 
     shape: 'circle', 
     attr: {cx, cy, etc...} 
    } 
] 

node.selectAll('*').data([myData]); 

myData.obj.forEach(function(obj) { 
    // Append different shapes based on data 
    var shape = node.enter().append(obj.shape); 
    Object.keys(obj.attrs).forEach(function(attr) { 
     // Bind attrs to shapes based on data 
     shape.attr(attr, obj.attrs[attr]); 
    }); 
}); 

노드는 'g'요소, MYDATA는 단일 데이터 객체입니다. 내 목표는 myData를 기반으로 g 내부의 자식 셰이프를 수정하는 것이므로 나중에 다른 myData를 바인딩하고이 함수를 다시 호출하면 업데이트 할 수 있습니다. 하지만 어떻게 든 myData는 첫 번째 추가 된 모양에만 바인딩됩니다. 동일한 데이터를 여러 도형에 쉽게 바인딩 할 수있는 방법이 있습니까? 개별적으로 그 그룹 요소 모양을

groups = d3.select('body').append('svg') 
      .selectAll('g').data(myData).enter() 
      .append('g'); 

및 추가 :

Answer 1

을 아마, 당신이 여기에 원하는 것은 D3의 .datum() 기능입니다 . 그 중 하나는 특정 용도입니다. 동일한 데이터를 여러 DOM 요소에 바인딩하는 것입니다 (즉, 하나의 데이터를 전체 d3 선택에 바인딩).

예를 들어 d3.selectAll('div').datum({foo: 'bar'})은 문서에 현재 존재하는 모든 <div>...</div> 요소에 동일한 개체 {foo: 'bar'}을 바인딩합니다. value 지정된 경우

...

selection.datum([value])https://github.com/mbostock/d3/wiki/Selections#datum 문의 인용 선택된 모든 요소에 지정된 값 요소의 결합 된 데이터를 설정한다. value 가 일정하면, 모든 요소를 ​​동일한 데이터 [SIC]

(다소 역설적 그가 .datum() 함수의 설명에서 "데이터"로 일정한 데이텀 지칭!)

주어진다

그러나 이것은 질문에 대한 문자 적 ​​답변입니다. 전체 목표를 처리하는 "기존의"D3-방법을 설명 할 수 귀하의 질문에 좀 더 디자인 지향적 인 대답이있을 수 있습니다 ...이 경우에, 당신은 아마

http://mbostock.github.io/d3/tutorial/circle.html

Answer 2

나는 myData에 항목에 대한 g 요소를 만들 것

groups.append('rect') 
groups.append('circle')