분산 형 스택 막대 차트에서 데이터를 업데이트하는 방법

Question

하나의 CSV 파일에서 다른 CSV 파일로 데이터를 업데이트하는 plunker을 만들었지 만 이에 따라 yaxis는 업데이트되지만 사각형은 업데이트되지 않습니다.

코드 부분에 여전히 이전 파일의 이전 데이터가 있습니다 (추측하고 있습니다). 나는 updateData() 기능에 .data(series)를 선언하지 않았기 때문에 나는이 추측하고있어

이고, 나는 또 다른 차트

g.selectAll(".bar").data(series).transition() 

등 ... 이 같은 일을 기억하지만이 작동하지 않습니다 이 차트.

나는 그것을 이해할 수 없으며, 어떤 도움을 주셔서 감사합니다!

Answer 1

문제는 기존 데이터 막대에 새 데이터를 조인하지 않았기 때문입니다.

일관성을 유지하기 위해 계열을 g 요소에 연결할 때 데이터 범주에 대한 키를 지정해야합니다 (범주 -1이 첫 번째 데이터 집합에서 양수이고 음수

g.append("g") 
     .selectAll("g") 
     .data(series, function(d){ return d.key }) //add function to assign a key 
     .enter().append("g") 
     .attr("class", "bars") //so its easy to select later on 
//etc 
... 



function updateData() { 

    d3.csv("data2.csv", type, function(error, data) { 

     ///etc  

     let bars = d3.selectAll(".bars") //select the g elements 

     bars.data(series, function(d){ return d.key }) //join the new data 
     .selectAll(".bar") 
     .data(function(d) { return d; }) 
     .transition() 
     .duration(750) 
      .attr("y", function(d) { return y(d[1]); }) 
      .attr("height", function(d) { return Math.abs(y(d[0])) - y(d[1]); }); 

: 두 번째에, 그러나 이것은 내가 추측 테스트 데이터) 관련 코드는 아래에 강조와 함께

여기에 업데이트 된 plunkr (https://plnkr.co/edit/EoEvVWiTji7y5V3SQTKJ?p=info가)입니다입니다