Javascript 根据用户输入更新d3中的条形图

我正在尝试根据用户选择的输入更新d3中的条形图。更新的数据正在显示，但它显示在旧的SVG元素上。我尝试使用exit.remove，但无效。 任何人都可以编辑下面附加的代码，以便删除旧的SVG元素。

---

你这里的问题是关于你的酒吧选择。您可以查看d3文档的这一部分：

通过写作

bar = svg.selectAll("bar")
    .data(data)
    .enter()

您正在选择所有条形图元，并将其连接到数据中，通过此输入，您将获得未链接到条形图元的所有数据项。 但是，您的条形选择器与任何内容都不匹配。select/selectAll的参数必须是选择器元素，class with.，id with。。。。这就是为什么“输入您的输入”选择总是在旧图元之上创建新图元，而不是更新它们

因此，第一步是重写此选择并创建稍后将匹配此选择的DOM元素：

bar = svg.selectAll(".bar")
    .data(data)
    .enter()
    .append("g")
    .attr('class', 'bar')
    .attr("transform", function(d, i) { return "translate(" + i * barWidth + ",0)"; });

在这里，我们使用bar类选择所有元素。如果没有DOM元素链接到来自数据的项，那么我们将在enter选择中创建它，作为带有bar类的新g

对于这样编写的选择，在下一次更新调用时，selectAll“.bar”将匹配以前创建的所有g，而不会对现有元素应用enter选择

要更新或删除现有的条形图，可以编写如下代码：

var barData = svg.selectAll(".bar")
    .data(data)

// Bars creation
var barEnter = barData.enter()
    .append("g")
    .attr('class', 'bar')
    .attr("transform", function(d, i) { return "translate(" + i * barWidth + ",0)"; });

barEnter.append("rect")
    .attr("y", function(d) { return y(d.b_stars); })
    .attr("height", function(d) { return height - y(d.b_stars); })
    .attr("width", barWidth - 1)
    .attr("fill", "steelblue");

barEnter.append("text")
    .attr("x", function(d) { return height - y(d.b_stars); })
    .attr("y", -40)
    .attr("dy", ".75em")
    .text(function(d) { return d.b_name; })
    .attr("transform", "rotate(90)" );


// Update the bar if the item in data is modified and already linked to a .bar element
barData.select('rect')
    .attr("height", function(d) { return height - y(d.b_stars); })

// Remove the DOM elements linked to data items which are not anymore in the data array
barData.exit().remove()

var barData = svg.selectAll(".bar")
    .data(data)

// Bars creation
var barEnter = barData.enter()
    .append("g")
    .attr('class', 'bar')
    .attr("transform", function(d, i) { return "translate(" + i * barWidth + ",0)"; });

barEnter.append("rect")
    .attr("y", function(d) { return y(d.b_stars); })
    .attr("height", function(d) { return height - y(d.b_stars); })
    .attr("width", barWidth - 1)
    .attr("fill", "steelblue");

barEnter.append("text")
    .attr("x", function(d) { return height - y(d.b_stars); })
    .attr("y", -40)
    .attr("dy", ".75em")
    .text(function(d) { return d.b_name; })
    .attr("transform", "rotate(90)" );


// Update the bar if the item in data is modified and already linked to a .bar element
barData.select('rect')
    .attr("height", function(d) { return height - y(d.b_stars); })

// Remove the DOM elements linked to data items which are not anymore in the data array
barData.exit().remove()