막 대형 차트의 원래 데이터 및 업데이트 된 데이터 표시

Question

사이트에서 다음 코드를 수정하여 원래 데이터와 업데이트 된 데이터를 모두 그래프에 표시하려고합니다. 업데이트 된 데이터를 다른 색상으로 유지하고 원래 데이터를 표시하고 변경 사항을 확인합니다. 누구든지 저에게 오류를 지적 할 수 있습니다. 내가 d3.selectAl를 사용하여 원본 데이터의 제어를 얻을 수 있다면

<title>d3 example</title> 
<style> 

.original{ 
fill: rgb(7, 130, 180); 
} 

.updated{ 
fill: rgb(7,200,200); 
} 

</style> 

는

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
<script type="text/javascript" src="http://d3js.org/d3.v2.min.js"></script> 


<script type="text/javascript"> 
    // Suppose there is currently one div with id "d3TutoGraphContainer" in the DOM 
    // We append a 600x300 empty SVG container in the div 
    var chart = d3.select("#d3TutoGraphContainer").append("svg").attr("width", "600").attr("height", "300"); 

    // Create the bar chart which consists of ten SVG rectangles, one for each piece of data 
    var rects = chart.selectAll('rect').data([1 ,4, 5, 6, 24, 8, 12, 1, 1, 20]) 
        .enter().append('rect') 
        .attr("stroke", "none") 
        //.attr("fill", "rgb(7, 130, 180)") 
        .attr('class','original') 
        .attr("x", 0) 
        .attr("y", function(d, i) { return 25 * i; }) 
        .attr("width", function(d) { return 20 * d; }) 
        .attr("height", "20"); 

    // Transition on click managed by jQuery 
    rects.on('click', function() { 
    // Generate randomly a data set with 10 elements 
    var newData = [1,2,3,4]; 

    //for (var i=0; i<10; i+=1) { newData.push(Math.floor(24 * Math.random())); } 

    var newRects = d3.selectAll('rects.original'); 

    newRects.data(newData) 
     .transition().duration(2000).delay(200) 
     .attr("width", function(d) { return d * 20; }) 
     //.attr("fill", newColor); 
     .attr('class','updated'); 
}); 
</script> 

나는 알고 싶어 l ('rects.original')

Answer 1

"rects.original"을 선택하고 데이터를 바인딩하는 경우 업데이트, 종료 및 Enter 선택 항목이있는 조인을 만듭니다.

   var newRects = chart.selectAll("rect.new") 
            .data(newData) 
            .enter() 
           (...) 

을하고 그릴 : 새 데이터가 이전의 구형 및 데이터 독립적으로 그려하려는 경우 내가 완전히 당신이 달성하려고하는 것을 이해하지만, 임 확실하지, 당신은 그것을위한 새로운 선택을 만들어야합니다 . SVG에서 겹치는 것은 기본 요소가 더 이상 표시되지 않는다는 것을 의미합니다.

"원본 데이터를 제어하는 ​​것이 무엇을 의미하는지 확실하지 않으므로 바인딩 한 선택 항목에 여전히 바인딩되어 있습니다. 수정하려는 경우 데이터를 수정하고 다시 바인딩 한 다음 업데이트 선택 항목에 전환을 적용해야합니다.