score:0

Accepted answer

I found the solution. I had to make two changes. In function d3data, I was updating the same array again and again, so the data was not getting updated correctly and before calling d3(), I had to remove existing graph.

function d3Data(){
    data_sorted = data.sort(function(x,y){
            return d3.ascending(+x.rank, +y.rank);
        });  // update array and put it in another variable
    var size = document.getElementById("range").value;
    console.log(size);
    data_sliced = data_sorted.slice(0,size);
    d3.select('.chart').html("");  //this to remove existing graph
    d3(data_sliced);
}

score:1

Each an every time depend upon the data SVG is newly created. So you have to remove the SVG Before Creation

    //d3.select("Your Id Name or Your Class Name").select("svg").remove();

In Your Code, I changed follow as

d3.select('.chart').select("svg").remove();
var svg = d3.select('.chart')

Related Query

More Query from same tag