秒更新

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。

希望这会有所帮助。