Javascript D3-单击后更新条形图数据

当用户使用D3单击按钮时，我试图更新我的网页内容。不幸的是，我可以看到onclick显示了新数据，但是旧数据并没有被忘记，尽管我使用了.exit（）。我的更新代码如下：

function updateData(param)
{
    // Get the data again
    d3.csv("bar-data2.csv", function(error, data) {
            data.forEach(function(d) {
            d.date = parseDate(d.date);
            d.value = +d.value;
        });
    alert(data.length);
    // Scale the range of the data again 
    x.domain(data.map(function(d) { return d.date; }));
    y.domain([0, d3.max(data, function(d) { return d.value; })]);

    // Select the section we want to apply our changes to
    var svg = d3.select("body").transition();

    d3.selectAll("bar")
    .data(data, function(d) { return(d); })
    .order()    
    .exit()
    .transition()
    //.delay(1000)
    .remove();

    // Make the changes
    svg.selectAll("bar")
      .data(data)
      .enter().append("rect")
      .style("fill", "orange")
      .attr("x", function(d) { return x(d.date); })
      .attr("width", x.rangeBand())
      .attr("y", function(d) { return y(d.value); })
      .attr("height", function(d) { return height - y(d.value); }); 
});

---

任何建议都将不胜感激。非常感谢

您需要选择实际存在的元素并只执行一次：

var sel = svg.selectAll("rect")
             .data(data);

sel.exit().remove();
sel.enter().append("rect")
// etc

也许这本书有帮助

您需要更新它们，而不仅仅是删除/添加新/旧数据之间的差异

var bars = svg.selectAll('bar')
    .data(data);

// Remove
bars.exit().remove();
// Add
bars.enter().append('rect').style('fill', 'orange');

// Update 
bars.attr('x', function(d) { return x(d.date); })
    .attr('width', x.rangeBand())
    .attr('y', function(d) { return y(d.value); })
    .attr("height", function(d) { return height - y(d.value); }); 

---

嘿，谢谢你的回复。我用所有的代码编辑了我的问题。我仍然不知道在哪里添加这个。在您当前的代码中，您正在选择“bar”元素。您从不附加这些元素，因此选择将始终为空。你只需要一次，而不是像上面的代码一样。哦，是的，它正在工作。你确实是对的！：）现在我唯一剩下的问题是如何删除条形图顶部的文本。对文本元素执行相同的操作--

svg。选择All（“.bartext”）

。