D3更新不更新新阵列

Question

I am trying to update the list but I'm pretty sure my update is not correct. When I click a button, it reads from an Html slider. The data that makes it to newdataset is correct and I'm getting the correct number of elements to show, but they are not the same as in newdataset.

var dataset;

function yearFilter(min, max) {
    return function (x) {
        if (x.YEAR <= max && x.YEAR >= min) return x
    }
};
d3.csv("./Datasets/Anne_Arundel_County_Crime_Rate_By_Type.csv", function (data) {
    dataset = data;

d3.select("body").selectAll("p").data(dataset).enter().append("p").text(function(d){return d.YEAR + " " + d.POPULATION});

});

function setMinValue(minYear, p1) {
    var x = document.getElementById(p1);
    var y = document.getElementById(minYear);
    x.innerHTML = y.value;
}

function setMaxValue(maxYear, p2) {
    var x = document.getElementById(p2);
    var y = document.getElementById(maxYear);
    x.innerHTML = y.value;
}

window.onload = function () {
    setMinValue('minYear', 'p1');
    setMaxValue('maxYear', 'p2');
}
document.getElementById("clickMe").onclick = update;

function settimespanandrun() {
    var firstYear = parseInt(minYear.value);
    var lastYear = parseInt(maxYear.value);
    var years = yearFilter(firstYear, lastYear);
     var yearFilterDataSet = dataset.filter(years);
     return yearFilterDataSet;

    };

    function update() {

        var newdataset = settimespanandrun();
        var newData = d3.select("body").selectAll("p").data(newdataset);
        newData.enter().append("p").text(function (d) {return d.YEAR + " " + d.POPULATION})
        newData.exit().remove();


    }

Answer 1

I think you may be missing an update action within your code, can you check if this works:

var newData = d3.select("body")
   .selectAll("p")
   .data(newdataset);

// update old data
newData.text(function (d) {return d.YEAR + " " + d.POPULATION});
// insert new data
newData.enter().append("p").text(function (d) {return d.YEAR + " " + d.POPULATION})
// Remove extra data
newData.exit().remove();