d3.js의 가로 막 대형 차트를 업데이트하려고합니다.

Question

막대 차트에서 월에 따라 데이터를 업데이트하고 전환하려고합니다.

저는 이것을 guide으로 사용했지만 어떻게 저의 예를 잘못 이해했는지 확신 할 수 없습니다. d3.js의 몇 가지 핵심적인 기본 사항을 놓치고 있다고 확신하지만 어디 있는지 모르겠습니다. 누군가가 나를 위해 그들을 가리킬 수 있다고 생각하니? 다음은 plnk 및 일부 코드입니다.

http://plnkr.co/edit/l0jQgzf2LHOatc1t8S5M?p=preview

function draw() { 

     updateData(); 


     x.domain(group.map(function(d) { 
      return d.label; 
     })); 
     y.domain([0, 100]); 

     // add axis 


    svg.append("g") 
      .attr("class", "x axis") 
      .attr("transform", "translate(0," + height + ")") 
      .call(xAxis) 
      .selectAll("text") 
      .style("text-anchor", "end") 
      .attr("dx", "-.8em") 
      .attr("dy", "-.55em") 
      .attr("transform", "rotate(-90)"); 


     svg.append("g") 
      .attr("class", "y axis") 
      .call(yAxis) 
      .append("text") 
      .attr("transform", "rotate(-90)") 
      .attr("y", 5) 
      .attr("dy", ".71em") 
      .style("text-anchor", "end") 
      .text("Value"); 

     // Add bar chart 
     var bar = svg.selectAll("compareBar") 
      .data(group); 
     bar 
      .enter().append("rect") 
      .attr('x', function(d) { 
       return x(d.label); 
      }) 
      .attr('y', function(d) { 
       return y(d.value); 
      }) 
      .attr('width', x.rangeBand()) 
      .attr('height', function(d) { 
       return height - y(d.value); 
      }); 


     bar.exit().remove(); 

     bar 
      .transition() 
      .duration(750) 
      .attr("y", function(d) { 
       return y(d.value); 
      }) 
      .attr("height", function(d) { 
       return height - y(d.value); 
      }); 

     svg.select(".y.axis").remove(); // << this line added 
     // Existing code to draw y-axis: 
     svg.append("g") 
      .attr("class", "y axis") 
      .call(yAxis) 
      .append("text") 
      .attr("transform", "rotate(-90)") 
      .attr("y", 6) 
      .attr("dy", ".71em") 
      .style("text-anchor", "end") 
      .text("value"); 

    } 

    $("ul#months li a").click(function() { 
     $("#selectMonth").text($(this).text()); 
     draw(); 
    }) 


    draw(); 
}); 

여기에 어떤 도움/조언을 사전에 .. 내가하지 백만 마일 떨어진 해요

감사를 기대하고있다!

Answer 1

때문에 2 개 이유로 주로 작동하지 않습니다 귀하의 코드 :

Problem1 :

당신은이 일을하고 있습니다 :

var bar = svg.selectAll("compareBar")//what is compareBar? 
     .data(group); 

이 있었어야 :

var bar = svg.selectAll("rect")//select all rectangle DOMs 
    .data(group); 

문제 2 :

당신은 RECT 바이 같은 데이터를 설정하는 :

var bar = svg.selectAll("compareBar")//what is compareBar? 
     .data(group); 

이 있었어야 :

var bar = svg.selectAll("rect") 
     .data(group, function(d){return d.value+d.label;}); 

고유 직사각형 바의 데이터를 식별합니다.

이 두 가지 수정 사항으로 현재의 문제가 해결됩니다.

here 고정

하지만 당신은 코드에서 문제가 많다.

1) y 축 x 축을 몇 번이고 그립니다.

2) 전환을 원하지만 작동하지 않습니다. 모든 문제는이 같은 APPEND를 수행 플래그가 켜져있을 때 생성에 대한 플래그를 통과 고정

:

if (create) { 
    bar 
    .enter().append("rect") 
    .attr('x', function(d) { 
     return x(d.label); 
    }) 
    .attr('y', function(d) { 
     return y(d.value); 
    }) 
    .attr('width', x.rangeBand()) 
    .attr('height', function(d) { 
     return height - y(d.value); 
    }); 
    svg.append("g") 
    .attr("class", "x axis") 
    .attr("transform", "translate(0," + height + ")") 
    .call(xAxis) 
    .selectAll("text") 
    .style("text-anchor", "end") 
    .attr("dx", "-.8em") 
    .attr("dy", "-.55em") 
    .attr("transform", "rotate(-90)"); 


    svg.append("g") 
    .attr("class", "y axis") 
    .call(yAxis) 
    .append("text") 
    .attr("transform", "rotate(-90)") 
    .attr("y", 5) 
    .attr("dy", ".71em") 
    .style("text-anchor", "end") 
    .text("Value"); 
} 

이 경우 당신은 또 다시 x와 y 축 + 막대를 피합니다.

그리고 전환이 모든 경우에 작동합니다 (갱신 + 작성) :

bar 
    .transition() 
    .duration(750) 
    .attr("y", function(d) { 
    return y(d.value); 
    }) 
    .attr("height", function(d) { 
    return height - y(d.value); 
    }); 

작업 코드, 특히 수정과에 대한 here