D3 - JSON 데이터 구조를 다루는 방법

D3 - JSON 데이터 구조를 다루는 방법

저는 D3에 처음 와서 이미 몇 시간 동안 구조화된 데이터를 다루는 방법을 찾아봤지만 긍정적인 결과를 얻지 못했습니다.아래의 데이터 구조를 사용하여 막대 차트를 만들고 싶습니다.막대는 (수평으로) 그려지지만 "jim" 사용자 전용입니다.

var data = [{"user":"jim","scores":[40,20,30,24,18,40]},
            {"user":"ray","scores":[24,20,30,41,12,34]}];

var chart = d3.select("div#charts").append("svg")                                   
              .data(data)
              .attr("class","chart")
              .attr("width",800)
              .attr("height",350);

chart.selectAll("rect")    
    .data(function(d){return d3.values(d.scores);})    
    .enter().append("rect")
    .attr("y", function(d,i){return i * 20;})
    .attr("width",function(d){return d;})
    .attr("height", 20);

내가 뭘 잘못했는지 누가 짚어줄 수 있나요?

selection.data를 사용하여 데이터를 선택 항목에 결합하는 경우 데이터 배열의 요소 수는 선택 항목에 있는 요소 수와 일치해야 합니다.데이터 배열에는 두 가지 요소(Jim 및 Ray용)가 있지만 바인딩하는 선택 항목에는 SVG 요소가 하나만 있습니다.여러 SVG 요소를 생성하려고 합니까, 아니면 Jim과 Ray의 점수 정수를 동일한 SVG 요소에 넣으려고 합니까?

양쪽 데이터 요소를 단일 SVG 요소에 바인드하는 경우 데이터를 다른 배열로 래핑할 수 있습니다.

var chart = d3.select("#charts").append("svg")
    .data([data])
    .attr("class", "chart")
    …

또는 join을 계산하지 않고 데이터를 직접 바인드하는 selection.datum을 사용합니다.

var chart = d3.select("#charts").append("svg")
    .datum(data)
    .attr("class", "chart")
    …

각 개인에 대해 여러 SVG 요소를 만들려면 데이터 결합이 필요합니다.

var chart = d3.select("#charts").selectAll("svg")
    .data(data)
  .enter().append("svg")
    .attr("class", "chart")
    …

두 번째 문제는 d3.values를 배열에 사용하면 안 된다는 것입니다.이 함수는 객체의 값을 추출하기 위한 것입니다.1인당 1개의 SVG 요소(이 예에서는 2개)를 필요로 한다고 가정하면, 직장의 데이터는 단순히 그 사람의 관련 점수입니다.

var rect = chart.selectAll("rect")
    .data(function(d) { return d.scores; })
  .enter().append("rect")
    …

아직 읽지 않았다면 다음 튜토리얼을 읽을 것을 권장합니다.

• 참가자에 의한 사고
• 중첩된 선택 항목

이렇게 하면 mbostock의 훌륭한 답변과 더불어 중첩된 측면이 명확해질 수 있습니다.

데이터의 내포 정도가 2단계입니다.각각 int 배열이 있는 2개의 객체가 있습니다.최종 이미지에 이러한 차이를 반영하려면 각 이미지에 대해 조인을 수행해야 합니다.

다음은 한 가지 해결 방법입니다.각 사용자는 그룹으로 표시됩니다.g요소, 각 점수는 a로 표시됩니다.rect. 이 작업은 몇 가지 방법으로 수행할 수 있습니다.어느쪽이든 사용datumsvg에서는 각 ID의 함수가g또는, 직접 데이터 접속을 할 수 있습니다.g.사용.data에서g보다 일반적인 방법이지만, 두 가지 방법이 있습니다.

svg의 데이텀 사용:

var chart = d3.select('body').append('svg')
  .datum(data)             // <---- datum
  .attr('width',800)
  .attr('height',350)
  .selectAll('g')
  .data(function(d){ return d; })  // <----- identity function
  .enter().append('g')
    .attr('class', function(d) { return d.user; })
    .attr('transform', function(d, i) { return 'translate(0, ' + i * 140 + ')'; })
    .selectAll('rect')
    .data(function(d) { return d.scores; })
    .enter().append('rect')
      .attr('y', function(d, i) { return i * 20; })
      .attr('width', function(d) { return d; })
      .attr('height', 20);

그룹 데이터 사용(g) 요소:

var chart = d3.select('body').append('svg')
  .attr('width',800)
  .attr('height',350)
  .selectAll('g')
  .data(data)          // <--- attach directly to the g
  .enter().append('g')
    .attr('class', function(d) { return d.user; })
    .attr('transform', function(d, i) { return 'translate(0, ' + i * 140 + ')'; })
    .selectAll('rect')
    .data(function(d) { return d.scores; })
    .enter().append('rect')
      .attr('y', function(d, i) { return i * 20; })
      .attr('width', function(d) { return d; })
      .attr('height', 20);

다시 말씀드리지만, 이러한 g 요소를 작성할 필요는 없습니다.이것에 의해, 유저의 스코어를 다르게 나타낼 수 있습니다(변환과는 y가 다릅니다).또, 다음과 같은 다양한 스타일을 제공할 수도 있습니다.

.jim {
  fill: red;
}
.ray {
  fill: blue;
}

언급URL : https://stackoverflow.com/questions/10086167/d3-how-to-deal-with-json-data-structures