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

【问题标题】：Updating chart data, but not all bars redrawing更新图表数据，但并非所有条形图都重绘
【发布时间】：2019-01-06 04:31:01
【问题描述】：

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

【问题讨论】：

标签： javascript d3.js data-visualization

【解决方案1】：

id 在 HTML 中是唯一的，应该只有 1 个标签。

为条形选择div，然后选择类为bar 的所有标签并绑定数据。

删除您添加到矩形的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)
    ......

【讨论】：