更新图表数据，但并非所有条形都在重绘

Question

我正在制作一个条形图，该条形图将基于另一个元素的鼠标悬停来更新其数据。图表更新时，如果新图表中的条形较少，则该图表永久性地具有较少的条形，并且改回数据不会将其重新添加。我添加了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。

Answer 1

HTML中的

id是唯一的，只能有1个标签。

为条形选择div，然后选择class为bar的selectAll标记并绑定数据。

删除添加到区域中的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)
    ......