CODEWITHSUNDEEP
javascriptd3.js
mike628
mike628

Reputation: 49321

D3 update not updating new Array

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


    }

Upvotes: 0

Views: 119

Answers (1)

torresomar
torresomar

Reputation: 2229

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

Upvotes: 2

Related Questions