d3.js 차트가 새 데이터로 업데이트되지 않았습니다.

Question

일련의 직사각형이 d3.js을 사용하여 100 개의 개체 배열을 가져 와서 그려졌습니다. console.log(data)에 새 데이터가 검색되는 것으로 표시 되더라도 새 데이터 요소는 모든 직사각형을 추가하지 않는 것처럼 보입니다.

.enter().append()이 잘못 사용 되었습니까?

function init() { 
    var width = 800, 
     height = 400, 
     margin = 50; 

    chart = d3.select('#chart') 
       .append('svg:svg') 
       .attr('width', width) 
       .attr('height', height); 
} 

function do_update() { 
    data = fetch_latest_top100(); 
    console.log(data) 

    chart.selectAll('rect') 
     .data(data) 
     .enter() 
     .append('svg:rect') 
     .attr('x', function(d) { return x(d.x); }) 
     .attr('y', function(d) { return y(d.y); }) 
     .attr('height', function(d) { return d.value; }) 
     .attr('width', function(d) { return 3 }); 
} 

jsfiddle : 당신의 업데이트 방법 http://jsfiddle.net/BU8cA/

Answer 1

문제는 만 새로운 요소를 처리하고 새로운 데이터와 일치하는 기존 요소를 업데이트하지 않습니다. Enter() 선택 항목으로 새 사각형을 만든 후에는 변경하려는 속성을 설정하기 위해 전체 선택 항목 (새 사각형 및 변경된 사각형)으로 돌아 가야합니다.

var rects = chart.selectAll('rect') 
     .data(data); 

    rects.enter() 
     .append('svg:rect') 
     .attr('width', function(d) { return 3 }); 
     // since the width is constant, you only need to set it once 

    rects.exit().remove(); //if the number of data points might shrink 

    rects.attr('x', function(d) { return x(d.x); }) 
     .attr('y', function(d) { return y(d.y); }) 
     .attr('height', function(d) { return d.value; }); 
    //note that this now includes the rectangles created with enter() 
    //as well as the old ones you are resizing/repositioning 

을 얻을 것을 :

이 작업을 수행하는 가장 쉬운 방법은 데이터 기능을 적용한 점에서 변수에 선택을 저장하지만 호출하기 전에이 같은 방법을 입력하는 것입니다 오른쪽 데이터가 들어 있지만 y 값이 올바르게 설정되지 않았다는 이유로 레이아웃 문제 (여하튼 바이올린에서)가 발생했습니다. y 값은 직사각형 상단의 위치입니다. 따라서 막대가 모두 같은 선상에있는 것처럼 보이게하려면 막대의 높이를 기준으로 막대를 조정해야합니다. 마이크 Bostock의 튜토리얼 및 데모 여기 : D3 버전은 "입력"선택에 추가 4+

요소에 대한 http://bost.ocks.org/mike/bar/3/

---

업데이트는 더 이상 자동으로 주 (갱신) 선택에 추가되지 않습니다. 이제 명시 적으로 "입력"선택에 merge 메소드를 호출하는 "병합"선택을 만들어야합니다

var rects = chart.selectAll('rect') 
    .data(data); 

rects.exit().remove(); //if the number of data points might shrink 

rects.enter() 
    .append('svg:rect') 
    .attr('width', function(d) { return 3 }) // since the width is constant, you only need to set it once 

    .merge(rects) 
      //merge the newly added elements into the main selection 
      //of existing elements to update 
    .attr('x', function(d) { return x(d.x); }) 
    .attr('y', function(d) { return y(d.y); }) 
    .attr('height', function(d) { return d.value; }); 

당신이 바이올린을 포함 할 경우 더 나은 것