秒更新

Question

我一模一樣的模型更新我的數據（使用D3）的兩倍時爲什麼D3刪除數據。

首次更新時，我可以看到數據（）。輸入（）包含了一些元素和數據（）。退出（）是空的。這對我來說是可以理解的。在第二次更新期間（使用相同的模型）data（）。enter（）是空的（正如我想的那樣），但data（）。exit（）不是空的，因此它在第二次更新期間刪除所有節點更新。這是我不明白的。當你只使用嵌套進入和退出平原g元素

// http://jsfiddle.net/24yqteo0/ 
// http://jsfiddle.net/6du29258/ - example with displaying some data 

var model = { 
    smth: 'test', 
    rows: [ 
     { 
      label: 'label1', 
      series: [ 
       { 
        test: 'test1_1' 
       }, 
       { 
        test: 'test1_2' 
       } 
      ] 
     }, 
     { 
      label: 'label2', 
      series: [ 
       { 
        test: 'test2' 
       } 
      ] 
     } 
    ] 
}; 

var svg = d3.select("body").append("svg"); 
updateData(model); 
console.log('// ------------- new update'); 
updateData(model); 

function updateData(model) { 
    var selection = svg.selectAll('g').data(model.rows); 
    console.log('selection enter size: ' + selection.enter().size()); 

    var rows = selection.enter().append('g'); 

    var rowData = rows.append('g').selectAll('g') 
    .data(function (d) { 
     return d.series; 
    }); 

    console.log('rowdata enter size: ' + rowData.enter().size()); 
    var seriesGroup = rowData.enter().append('g'); 

    console.log('rowdata exit size: ' + rowData.exit().size()); 
    rowData.exit().remove(); 

    console.log('selection exit size: ' + selection.exit().size()); 
    selection.exit().remove(); 
} 

Answer 1

嗯，這是不作調試幫助：;

這裏被簡化代碼（看控制檯的jsfiddle）。

我更換了seriesGroup與text追加如下fiddle here：

var seriesGroup = rowData.enter() 
    .append('text') 
    .text(function (d) { return d.test; }); 

我很快就發現了問題，你的代碼。它實際上是updateData

var selection = svg.selectAll('g').data(model.rows); 

第一行這種選擇包括ALLg元素，包括嵌套的。 （選擇的console.log確認） 爲了防止此問題，可以添加一個更精確的選擇器，例如class

var selection = svg.selectAll('g.row').data(model.rows); 

然後append

​​

類似地，對於第二級：

var rowData = rows.append('g').selectAll('g.series') 

然後

var seriesGroup = rowData.enter() 
    .append('g') 
    .classed('series', true); 

Updated fiddle here。

希望這會有所幫助。