如何更新此數據而不重繪已存在的數據點？

D3的新手。我正在修改顯示here的簡單條形圖示例。我正在嘗試更新數據，但缺少一些基本的東西。我試圖沿着here，Mike在那裏談論物體恆定性。具體來說，我想實現我的代碼如下：如何更新此數據而不重繪已存在的數據點？

Key functions can be useful for improving performance independent of transitions. For example, if you filter a large table, you can use a key function to reduce the number of DOM modifications: reorder DOM elements in the update selection rather than regenerating them. We used this technique at Square to improve the performance of merchant analytics, and it’s one of the reasons that D3 is faster than most template frameworks.

（在我的情況，我的主要功能是簡單的「數據（數據）」（這是確定的，根據this post）

我的代碼如下，但我懷疑是不是性能最友好的。例如，頻率「70」是在兩組數據中，但通過「刪除」數據，我正在有效地重繪它（如果我不首先「刪除」數據，然後繪製另一個圖表，而不是舊圖表只是獲取更新的數據）。如何修改下面的代碼以遵守關鍵函數，以便兩個數據集中存在的數據都不會得到重繪？

我的條形圖代碼：

<!DOCTYPE html> 
<meta charset="utf-8"> 
<style> 

body { 
    font: 10px sans-serif; 
} 

.axis path, 
.axis line { 
    fill: none; 
    stroke: #000; 
    shape-rendering: crispEdges; 
} 

.bar { 
    fill: steelblue; 
} 

.x.axis path { 
    display: none; 
} 

</style> 
<body> 

<button id="change" name="change">Update</button> 

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


<script> 
$(document).ready(function() { 
    var old_data = [{"letter": "A","frequency": "50"}, 
       {"letter": "B","frequency": "60"}, 
       {"letter": "C","frequency": "70"}, // this also appears in new_data 
       {"letter": "D","frequency": "80"}, 
       ]; 


    draw_chart(old_data); 

    $("#change").click(function(){ 

     var new_data = [{"letter": "A","frequency": "10"}, 
         {"letter": "B","frequency": "20"}, 
         {"letter": "C","frequency": "70"}, // this appears in old_data 
         {"letter": "D","frequency": "30"}, 
         ]; 


     var bar = d3.select('body').selectAll('svg').remove();// delete this line and you'll get multiple charts rather than just updating the data in the original chart 
     draw_chart(new_data); 
    }); 
}); 

</script> 


<script> 
function draw_chart(data){ 

var margin = {top: 20, right: 20, bottom: 30, left: 40}, 
    width = 960 - margin.left - margin.right, 
    height = 500 - margin.top - margin.bottom; 

var x = d3.scale.ordinal() 
    .rangeRoundBands([0, width], .1); 

var y = d3.scale.linear() 
    .range([height, 0]); 

var xAxis = d3.svg.axis() 
    .scale(x) 
    .orient("bottom"); 

var yAxis = d3.svg.axis() 
    .scale(y) 
    .orient("left"); 

var svg = d3.select("body").append("svg") 
    .attr("width", width + margin.left + margin.right) 
    .attr("height", height + margin.top + margin.bottom) 
    .append("g") 
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

    data.forEach(function(d) { 
    d.frequency = +d.frequency; 
    }); 

    x.domain(data.map(function(d) { return d.letter; })); 
    y.domain([0, d3.max(data, function(d) { return d.frequency; })]); 

    svg.append("g") 
     .attr("class", "x axis") 
     .attr("transform", "translate(0," + height + ")") 
     .call(xAxis); 

    svg.append("g") 
     .attr("class", "y axis") 
     .call(yAxis) 
    .append("text") 
     .attr("transform", "rotate(-90)") 
     .attr("y", 6) 
     .attr("dy", ".71em") 
     .style("text-anchor", "end") 
     .text("Frequency"); 

    svg.selectAll(".bar") 
     .data(data) 
     .enter().append("rect") 
     .attr("class", "bar") 
     .attr("x", function(d) { return x(d.letter); }) 
     .attr("width", x.rangeBand()) 
     .attr("y", height) 
     .attr("height","0") 
     .transition() 
     .delay(function(d, i) { return i*300 }) 
     .duration(1000) 
     .attr("y", function(d) { return y(d.frequency); }) 
     .attr("height", function(d) { return height - y(d.frequency); }); 
    } 

</script>

來源

2012-11-19 Marissa Levy

你有沒有進一步提出你的問題？ – enjoylife

首先，爲什麼你行的原因，

var bar d3.select('body')...remove() // delete this line and you'll get double...

是怎麼一回事，因爲在你的draw_chart你總是附加到頁面時，它被稱爲。你需要改變這一行，

var svg = d3.select("body").append("svg")

的東西，不不斷追加新的SVG

如果我有更多的時間我會看看的主要問題。

來源

2012-11-19 00:32:09 enjoylife

如何更新此數據而不重繪已存在的數據點？

回答

相關問題