json 데이터에서 각 막대의 값을 가져 오는 방법은 무엇입니까?

Question

틱당 두 개의 막대가있는 그래프 (d3.js 사용)를 작성하려고합니다.

var dataset = [ 
    { 
     'month': 'Jan', 
     'count': { 
      'red': 29, 
      'white': 32 
     } 
    }, 
    { 
     'month': 'Feb', 
     'count': { 
      'red': 23, 
      'white': 42 
     } 
    }, 
    { 
     'month': 'Mar', 
     'count': { 
      'red': 34, 
      'white': 47 
     } 
    } 
]; 

가 어떻게 각각의 막대를 얻을 수 있습니다 :

은 내가 이런 식으로 뭔가를 시도했습니다, 데이터 작업을위한 가장 적합한 구조를 모르겠어요?

나는 해봤이

function red(d, i) { return d[i]['red']; } 

chart.selectAll('rect') 
    .data(dataset, red) 
    .enter().append('rect') 
    .attr('x', 0) 
    .attr('y', 0) 
    .attr('width', 20) 
    .attr('height', 100); 

(I은 폭과 높이를 X, Y, 고정 값을 사용하고 있다는 사실을 신경 쓰지 마. 그냥 예입니다.)

Answer 1

각 막대 쌍을 g 요소에 넣을 수 있습니다. 이런 식으로 뭔가 :

var groups = chart.selectAll('g') 
    .data(dataset) 
    .enter().append('g'); 

var reds = groups.append('rect') 
    .datum(function(d) { return d.count.red; }) 
    .attr('class', 'red'); 

var whites = groups.append('rect') 
    .datum(function(d) { return d.count.white; }) 
    .attr('class', 'white');