顯示條形圖的原始數據和更新數據

我試圖修改在其中一個站點上找到的以下代碼，以在圖形中顯示原始數據和更新數據。我希望更新的數據具有不同的顏色，並仍然顯示原始數據並查看更改。任何人都可以指出我的錯誤。顯示條形圖的原始數據和更新數據

<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>

我想知道我是否可以使用d3.selectAl得到原始數據的控制l（'rects.original'）

來源

2013-01-07 beeCoder

如果您選擇「rects.original」並將數據綁定到該數據，則使用Update，Exit和Enter選項創建一個連接。林不知道我完全理解你想達到什麼樣的，但如果你想新數據獨立抽取舊rects和數據，你必須創建一個新的選擇吧：

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

和繪製。請注意SVG中的重疊意味着底層元素不會再顯示。我不確定你的意思是「控制原始數據」，它仍然綁定到你綁定它的選擇。如果要修改它，則必須修改數據，重新綁定它，然後在更新選擇上應用轉換。

來源

2013-08-21 10:19:16 morg

顯示條形圖的原始數據和更新數據

回答

相關問題