Javascript 更新图表数据，但不是所有条形图都重新绘制

我正在制作一个条形图，它根据另一个元素的鼠标悬停更新数据。当图表更新时，如果新图表中的条形图减少，则图表中的条形图将永久减少，并且更改数据不会将其重新添加。我添加了一个gif来显示这一点-当它下降到3条，他们永远不会回来

这是我的密码：

var scatter_versus_dataset; // the main set
var scatter_versus_dataset_filtered;

// set versus y scale
scatter_versus_y = d3.scaleBand().range([0, SCATTER_VERSUS_HEIGHT])
// set versus x scale
scatter_versus_x_fatal = d3.scaleLinear().range([0, SCATTER_VERSUS_WIDTH / 3]);
scatter_versus_x_nonfatal = d3.scaleLinear().range([-1 * SCATTER_VERSUS_WIDTH / 3, 0 ])
// set the versus colors                   
scatter_versus_z = d3.scaleOrdinal().range(STACK_COLOURS);

...

function updateScatterVersus(code){

// filter the set
scatter_versus_dataset_filtered = scatter_versus_dataset.filter(function (d) { return (d.majorOccCodeGroup == code) })

scatter_versus_y.domain(scatter_versus_dataset_filtered.map(function (d) { return d.occupation; })).padding(BAR_PADDING);
scatter_versus_x_fatal.domain([0, d3.max(scatter_versus_dataset_filtered, function (d) { return d.f_total_rate; })]).nice();
scatter_versus_x_nonfatal.domain([d3.min(scatter_versus_dataset_filtered, function (d) { return +-1 * d.nf_total_rate; }), 0]).nice();

var bars = d3.selectAll("#scatter_versus_fatal_rect")
    .data(scatter_versus_dataset_filtered)
bars.exit()
    .remove()
bars.transition()
    .duration(600)
    .attr("y", function (d) {
        return scatter_versus_y(d.occupation);
    })
    .attr("x", function (d) {
        return scatter_versus_x_fatal(0) + SCATTER_VERSUS_GAP_HALF;
    })
    .attr("width", function (d) {
        return scatter_versus_x_fatal(d.f_total_rate);
    })
    .attr("height", scatter_versus_y.bandwidth())

bars.enter()
    .append("rect")
    .attr('id', 'scatter_versus_fatal_rect')
    .classed("bar", true)
    .attr("y", function (d) {
        return scatter_versus_y(d.occupation);
    })
    .attr("x", function (d) {
        return scatter_versus_x_fatal(0) + SCATTER_VERSUS_GAP_HALF;
    })
    .attr("width", function (d) {
        return scatter_versus_x_fatal(d.f_total_rate);
    })
    .attr("height", scatter_versus_y.bandwidth())

}

重新绘制图表另一侧的过程完全相同。如果我只画一条边，问题仍然存在

---

数据只是来自csv，我认为这不是问题所在——过滤集的条目数正确，在其他图表中也可以。这可能与删除和重画有关，但我找不到很多这样的例子。或者一把钥匙？如果需要，我可以上传一些数据，但这是一个相当大的CSV。

id

在HTML中是唯一的，只有一个标签应该有它

选择条形图的

div

，然后选择所有带有class is

bar的标签

并绑定数据

删除添加到RECT的

id

var bars = d3.select("#scatter_versus_fatal_rect")
    .selectAll(".bar")
    .data(scatter_versus_dataset_filtered);

bars.enter()
    .append("rect")
    // .attr('id', 'scatter_versus_fatal_rect')
    .classed("bar", true)
    ......