D3 - 点击更新条形图数据

Question

当用户使用 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); }); 
});

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

Answer 1

也许这个教程有帮助：Thinking with Joins。

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

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); }); 

Answer 2

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

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

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