D3 更新不更新新数组答案

【问题标题】：D3 update not updating new ArrayD3 更新不更新新数组
【发布时间】：2017-12-12 20:27:45
【问题描述】：

我正在尝试更新列表，但我很确定我的更新不正确。当我单击一个按钮时，它会从 Html 滑块中读取。进入 newdataset 的数据是正确的，我得到了正确数量的元素来显示，但它们与 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();


    }

【问题讨论】：

您的代码将适用于 D3 v3，但不再适用于 D3 v4。前几天我写了一个关于这个的答案：stackoverflow.com/a/47744751/5768908

标签： javascript d3.js

【解决方案1】：

我认为您的代码中可能缺少更新操作，您能否检查一下这是否有效：

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();

【讨论】：