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

D3 - 更新条形图数据onclick

2 个答案: