맞춤형 d3.js 기반 시각화 관련 문제

Question

d3.js를 배우고 있으며 아래 필기구에 포함 된 예제 이미지의 시각화를 미러링해야합니다.

http://jsfiddle.net/mike_ellan/37PYJ/

내가 만들고 텍스트 요소를 바인딩하는 방법을 알고 원 안쪽 라벨에 대해 이렇게 계획했지만, 나는 어떻게이 함께 일을해야 주위에 내 머리를 받고 힘든 시간을 보내고있어 특정 데이터 구조. 나는 평평한 json 구조를 요청할 수있는 옵션이 없으므로 올바르게 매핑해야합니다. 여기에 내가 함께 시작하고 데이터입니다 : 연도로 ​​

var consumption = [ 
{ 
    "fruits": [ 
     { 
      "year":"2011", 
      "apples":"213", 
      "oranges":"176", 
      "pears":"987" 
     }, 
     { 
      "year":"2012", 
      "apples":"199", 
      "oranges":"234", 
      "pears":"672" 
     } 
    ] 
} 
]; 

, 내 계획은 2 행/열 테이블을 생성 한 후 다시 JSON 들어오는 무슨 일을 기준으로 매년 열을 추가하는 것이 었습니다. 어떻게하면 좋을지에 대한 조언이나 조언을 해줄 수 있습니까?

Answer 1

마이크를 사용하면 빠르게 그래프를 만들 수 있습니다.

헤더

// Group Columns 
var columns = groupColumn.selectAll("g") 
            .data(consumption[0].fruits) 
            .enter() 
            .append("g") 
            .attr("class", function(d,i) { return "column - " + i }); 
       // Append year 
       columns.append("text") 
          .attr("transform", function(d,i) { return "translate(" + i*(width/2) + "," + height/2 + ")"; }) 
          .text(function(d) {return d.year }); 

행을 만들고

var text = groupRow.selectAll("text") 
          .data(function(d) {return d3.entries(d).filter(function(d) { return d.key !== "year"; })}) 
          .enter() 
          .append("text") 
            .attr("dx", function(d,i){ return (60 * i) + 20 }) 
            .attr("dy", 55) 
            .attr("fill", "white") 
            .text(function(d) {return d.value}); 

필드에 필드를

// Append row 
var groupRow = columns.append("g") 
          .attr("class", "fruits") 
          .attr("transform", function(d,i) { return "translate(" + i*(width/2) + "," + height/2 + ")"; }) 

// Append fields of row 
var rows = groupRow.selectAll("circle") 
           .data(function(d) {return d3.entries(d).filter(function(d) { return d.key !== "year"; })}) 
           .enter() 
           .append("circle") 
            .attr("cx",function(d,i){ return (60 * i) + 30 }) 
            .attr("cy",50) 
            .attr("r",25) 
            .attr("fill", function(d){ 
             if(d.key === "apples"){ return "red" } 
             else if (d.key === "oranges"){ return "orange" } 
             else if (d.key === "pears"){ return "green" } 
            }) 

텍스트 추가를 추가를 열 만들기 및 추가

보기 코드 http://jsfiddle.net/jmeza/37PYJ/3/

예는 완전하지 않다, 나는 당신에게 첫 번째 단계를 제공합니다 ... 도와 시간을내어 너무 많은