D3.js數據更新「記住」舊數據

我想更新條形圖，但它「記住」我初始化數據的長度。這裏是什麼，我認爲我做的：D3.js數據更新「記住」舊數據

創建圖表，並用5個對象數組繪製的第一次 - 渲染這工作正常
更新圖表與原始數據的子樣（現在只有4個對象）
更新的工作原理，但它並沒有將條形渲染到彼此之上，而是留下了一個間隔，其中被刪除的對象之前是空白的。

我想更新導致條形圖只顯示數組中沒有間隙的剩餘對象。我究竟做錯了什麼？

你可以在這裏找到代碼：http://tributary.io/inlet/8919193玩它。或者在這裏以簡單的形式：

var svg = d3.select("svg"); 

    var BarChart = function BarChart(chart_attributes){ 
    // hide variables within function scope 
    var chart = {}, 
     data; 

    // data setter and getter 
    chart.data = function(new_data){ 
     if(new_data){ data = new_data; } 
     return data; 
    }; 

    // update data and redraw chart 
    chart.update = function(new_data){ 
     // update data 
     if(!new_data){ console.log("chart.update() - no data set!"); } 
     else{ chart.data(new_data); } 

     // redraw 
     var bar_attr = chart_attributes.bars; 
     var groups = svg.selectAll("g").data(chart.data(), function(d){ return d.NAME }); 

     var g = groups.enter().append("g") 
     .attr("transform", function(d, i) { return "translate(100," + ((i * bar_attr.height)+100) + ")"; }); 

     var bars = g.append("rect") 
     .attr("x", bar_attr.x) 
     .attr("height", bar_attr.height-1).transition() 
     .attr("width", function(d,i){return d.INTENSITY*10}); 

     g.append("text") 
     .attr("y", bar_attr.height-2) 
     .attr("x", 0) 
     .attr("font-size", bar_attr.height) 
     .text(bar_attr.label); 

     groups.exit().remove(); 

    }; 


    return chart; 
    }; 


    var data = [ 
    { "INTENSITY": 9, "NAME": "label 1"}, 
    { "INTENSITY": 10, "NAME": "label 2"}, 
    { "INTENSITY": 10, "NAME": "label 3"}, 
    { "INTENSITY": 13, "NAME": "label 4"}, 
    { "INTENSITY": 21, "NAME": "label 5"} 
    ]; 

    var margin_top = 50, 
     margin_left = 70, 
     bar_height = 20; 

    var bar_attributes = { 
    "x": margin_left, 
    "y": function(d,i){ return (i*bar_height)+margin_top;}, 
    "height": bar_height, 
    "width": function(d,i){ return d.INTENSITY*10}, 
    "label": function(d,i){ return d.NAME } 
    }; 

    var attr = {"bars": bar_attributes }; 

    var chart = new BarChart(attr); 

    chart.update(data); 
    data.splice(1,1) 
    chart.update(data);

來源

2014-02-10 gessulat

問題是你不更新更新數據的酒吧的位置。

var g = groups.enter().append("g") 
    .attr("transform", function(d, i) { return "translate(100," + ((i * bar_attr.height)+100) + ")"; });

更換這與

var g = groups.enter().append("g"); 
groups.attr("transform", function(d, i) { return "translate(100," + ((i * bar_attr.height)+100) + ")"; });

修復的問題 - 的位置被設置爲所有新的和現有的g：設置在g元素的位置的代碼只在新的數據上運行元素現在。完整示例here。

來源

2014-02-10 18:20:28

D3.js數據更新「記住」舊數據

回答

相關問題