Я хочу обновить данные на этой гистограмме d3.js, нажав кнопку. (onclick)

Question

Как я могу рассказать D3, чтобы нажать новый график с новыми случайными данными, нажав кнопку, которую я создал? сейчас я получаю новые данные, обновляя страницу, но я хочу, чтобы можно было нажимать новый график без перезагрузки страницы.

</script> 
    var w = 500; 
    var h = 500; 
    var barPadding = 1; 

    var dataset = [ ]; 

    for (var i = 0; i < 14; i++) {var newNumber = Math.round(Math.random() * 70); 
    dataset.push(newNumber);} 



    var svg = d3.select("body") 
      .append("svg") 
      .attr("width", w) 
      .attr("height", h); 

    var widthScale = d3.scale.linear() 
        .domain([0, d3.max(dataset, function(d,i) {return d;})]) 
        .range([0,w]); 

     svg.selectAll("rect") 
      .data(dataset) 
      .enter() 
      .append("rect") 
      .attr("x", 3) 
      .attr("y", function (d,i) {return i* 36;}) 
      .attr("width", widthScale) 
      .transition() 
      .duration(1000) 
      .attr("height", h/dataset.length - barPadding) 
      .attr("fill", function(d) {return "rgb(0, 0, " + (d * 10) + ")";}); 

     svg.selectAll("text") 
      .data(dataset) 
      .enter() 
      .append("text") 
      .text(function(d) {return d;}) 
      .attr("x", function(d) {return widthScale(d) -17;}) 
      .attr("y", function(d,i) {return (i * 36) + 23 ;}) 
      .attr("fill", "white") 
      .attr("font-family", "sans-serif") 
      .attr("text-anchor", "middle"); 

Answer 1

Вам необходимо включить указать .update() и .exit() выделения. В идеале вы должны изменить свой код, чтобы он только вызывал .data(dataset).

var g = svg.selectAll("g") 
    .data(dataset); 

И тогда вы можете определить, что делать на .enter().update() и .exit(). Ваш .enter() s начнет g.enter().append('rect') и g.enter().append('text') соответственно. В то время как вам нужно будет работать с .update(), выход может быть таким же простым, как удаление объекта.

g.exit() 
    .remove(); 

Для большинства данных идентичность каждого элемента данных является значением индекса. Если это не так, то вам нужно будет убедиться, что вы предоставляете аксессор

.data(data, function(d) { return d.name; }) 

Я бы порекомендовал this tutorial on bar charts, который должен получить вас до скорости. Если это слишком продвинутый, попробуйте сначала part 1. Вы даже можете удалить требование, чтобы пользователь нажал кнопку для обновления.