D3 - 更新图表中的数据而不重绘svg - 输入，退出

Question

我这里有一个傻瓜 -

它是一个堆叠条形图，使用角度为4的D3

我有一个更新按钮，用于更新图表中的数据。

我不想重绘整个图表，只是更新条形图。

按钮调用只创建条形的drawChart。

我这里有一个console.log，显示单击按钮时数据会更新。

.exit() .remove()

我在enter()之前使用private drawChart(data:any){ this.layersBar = this.layersBarArea.selectAll('.layer') .remove() .exit() .data(data) .enter() .append('g') .classed('layer', true) .style('fill', (d:any,i:any)=>{ return this.colors[i] }); this.x.domain(this.stackedChart.map((d:any)=>{ return d.date })); this.y.domain([0, +d3.max(this.stackedSeries, function(d:any){ return d3.max(d, (d:any)=>{ return d[1] }) })]); this.layersBar.selectAll('rect') .data((d:any)=>{ return d; }) .enter() .append('rect') .attr('y', (d:any)=>{ return this.y(d[1]) }) .attr('x', (d:any, i:any)=>{ return this.x(d.data.date) }) .attr('width', this.x.bandwidth()) .attr('height', (d:any, i:any)=>{ return this.y(d[0]) - this.y(d[1]); }) } 我认为这会处理删除旧数据。

我认为这是我的D3的最后一部分。

==========================================

更新

在这个plunker中 - https://plnkr.co/edit/WsE6zhIUY9ictTtOTU1W?p=preview

我可以加载新数据，但无法删除旧数据，如何删除旧数据。

==========================================

更新

所以我让它在这个plunker中工作 - https://plnkr.co/edit/9zVKStEPuwoHlbrWgLlV?p=preview

我更简单地交换了.remove和.exit

的位置

有谁知道这是否是正确的方法。我在任何例子中都没有看到这个

.comments--item:after {
    content: '';
    display: table;
    width: 100%;
    clear: both;
}