d3.js如何更新嵌套节点？

问题描述：

这是jsfiddle。我预计，第二步后，当我用新的数据集更新表格行时，它会显示3和4.但它仍然显示1和2。为什么？为什么嵌套元素仍旧保留旧数据集？如何解决它？如何更新嵌套标签？d3.js如何更新嵌套节点？

const data1 = [1, 2]; 

const table = d3.select('body') 
    .append('table') 
    .append('tbody'); 

table 
    .selectAll('tr') 
    .data(data1) 
    .enter() 
    .append('tr') 
    .append('td') 
    .text(function(d) { 
    return d; 
    }); 

const data2 = [3, 4]; 

table 
    .selectAll('tr') 
    .data(data2) 
    .selectAll('td') 
    .text(function(d) { 
    return d; 
    });

我发现如果在第二步用'.select（'td'）替换'.selectAll（'td'）''它可以正常工作，但是为什么？ – zeleniy

我制作的这张表可能会帮助您了解不同点：https://*.com/a/44897592/5768908 –

答

要回答您的评论问题，这是一个子选择select。从该文档：

不同于selection.selectAll，selection.select不影响分组：它保留了现有的组结构和索引，并传播数据（如果有的话），以选定的儿童。分组在数据连接中起着重要作用。有关此主题的更多信息，请参阅嵌套选择和选择方式。

这里的重要部分是将数据传播给选定的子女。

d3.js如何更新嵌套节点？

相关推荐