Question

我正在尝试更新列表，但我很确定我的更新不正确。当我单击一个按钮时，它会从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();


    }

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

D3更新不更新新阵列

1 个答案: