D3 - обновить данные гистограммы onclick

Question

Я пытаюсь обновить содержимое своей веб-страницы, когда пользователь нажимает кнопку с помощью D3. К сожалению, я вижу, что на экране отображаются новые данные, но старые данные не забываются, хотя я использую .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

Вы должны выбрать элементы, которые действительно существуют, и сделать это только один раз:

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

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

Answer 2

Может быть, это помогает tutoial: 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); });