업데이트 된 데이터가 왜 다시 렌더링되지 않습니까?

Question

D3.js에서 "업데이트"패턴으로 놀고 있습니다. 나는 "Change"버튼을 누를 때 데이터를 업데이트 할 간단한 막대 그래프를 작성 중이다.

내 문제는 "변경"버튼을 누르면 처음 세 개의 렌더링 된 막대가 다시 렌더링되지 않는다는 것입니다. 디버깅하여 데이터가 올바르게 적용되었는지 확인했지만 (__data__은 정확함), 다시 신청하지 못했습니다. 당신은 selectAll()를 사용하여

bars.select("rect") 
    .attr("width", String); 

bars.select("text") 
    .text(String); 

: 당신이 .select()로 처리하여 업데이트 선택에 .selectAll()을 변경하면 그것은 작동

var myData = [ 100, 200, 300 ]; 

d3.select('body').append('button').text("Change").on("click", function() { 
    myData = [200, 400, 600, 700, 800, 900, 1000]; 
    update(myData); 
}); 

var svg = d3.select('body').append('svg') 
    .attr("class", "chart") 
    .attr("y", 30); 

var update = function(data) { 
    var bars = svg.selectAll('g') 
    .data(data); 

    var groups = bars.enter() 
    .append("g") 
    .attr("transform", function(d,i) {return "translate(0," + i*25 + ")"}); 

    groups 
    .append("rect") 
    .attr("height", 25) 
    .attr("fill", "pink") 
    .attr("stroke", "white"); 

    groups 
    .append("text") 
    .attr("x", 10) 
    .attr("y", 18) 
    .attr("fill", "red"); 

    bars.selectAll("rect") 
    .attr("width", String); 

    bars.selectAll("text") 
    .text(String); 
}; 

update(myData); 

Answer 1

: 여기

내 코드와 CodePen에 대한 링크입니다 요소를 추가 할 때 바인딩 된 선택한 요소 (즉, 사각형 및 텍스트 요소)에 바인딩 된 데이터에 액세스합니다. g 요소를 포함하도록 업데이트 한 경우에만이 데이터가 업데이트되지 않았습니다. 대신 .select()을 사용하면 새 데이터를 하위 요소에 바인딩합니다.

사용중인 일반적인 패턴은 nested selection이며 약간의 혼란스러워 예기치 않은 결과가 발생할 수 있습니다.