d3에서 데이터 바인딩을 사용하여 축 생성

Question

최근에 d3.js 기반 시각화의 개발을 시작한 후에 많은 수의 축을 만들어야합니다.

데이터 (각 축의 도메인 포함)를 바인딩하고 입력 선택에 요소를 추가하여 다른 svg 요소 (원, 선)를 만들 때 사용했던 것과 동일한 접근법을 사용하려고했습니다.

axesSVG.selectAll("g") 
     .data(dimensionExtents) 
     .enter() 
     .append("g") 
     .attr("class","axis") 
     .call(function(d){return d3.svg.axis() 
       .scale(d.scale).range(0,500)) 
       .orient("left") 
       .ticks(20);}) 
     .attr("transform", "translate(function(d,i){....},0)"); 

그러나이 방법은 작동하지 않습니다. 실행 후 svg 요소에는 축이 있어야하는만큼 빈 요소가 포함됩니다. 나는 전화 예를 들어 attr과 같이 사용자가 지정한 데이터를 사용할 수 없다고 생각합니다.

누구든지 확인할 수 있습니까?

for 루프 기반 솔루션을 사용하기 전에 나는 코드에서 기본 개념에 대한 어리석은 오류나 오해가 없는지 확인하고 싶습니다.

Answer 1

selection.call은 다른 선택 기능의 대부분과 다르게 작동합니다. 현재 선택에서 인수로 한 번 전달되는 제공된 함수를 호출합니다.

예에서 함수의 d 인수는 실제로 새로 추가 된 g 요소를 포함하는 입력 선택입니다.

selection.each

당신을 위해 무엇을 찾고있는 아마 더 : d 각 노드에있는 데이터를 전달되는,

axesSVG.selectAll("g") 
    .data(dimensionExtents) 
    .enter() 
    .append("g") 
    .attr("class","axis") 
    .each(function(d) { 
     var axis = d3.svg.axis() 
      .scale(d.scale).range(0,500)) 
      .orient("left") 
      .ticks(20); 

     axis(d3.select(this)); 
    }); 

각 선택에 노드 당 한 번만 호출됩니다와 this 기준으로 현재 노드가 있습니다 .