d3.js - Error in redrawing graph with update function -

d3.js - Error in redrawing graph with update function -

i'm trying redraw , update graph every time slider moved, filters dataset within year range. unfortunately things aren't working , i'm unsure mistakes are.

when seek run code error:

error: invalid value <rect> attribute y="nan" error: invalid value <rect> attribute height="nan"

i'm totally lost, help appreciated.

link fiddle: http://jsfiddle.net/vyab4kcf/11/

you shouldn't doing this...

request_data = data;

and line referring global year when should local argument sexyear

var yeardata = data.filter(function (element) { homecoming element.year == year });

should

var yeardata = data.filter(function (element) { homecoming element.year == sexyear });

also, seek change event input works in ie...

d3.select("#sexyear").on("change", function () { update(+this.value); });

this.value undefined here because update called global this context

function update(sexyear) { console.log(this.value);

you should read these 2 lines , think doing...

var agenames = d3.keys(yeardata[0]).filter(function (key) { homecoming key !== "cause"; }); var agenames = d3.keys(yeardata[0]).filter(function (key) { homecoming key !== "year"; });

i guarantee it's not think.

agenames confusing name this, should seriesnames example. can implement this...

var notseriesnames = ['cause', 'year'] //... var seriesnames = d3.keys(yeardata[0]).filter(function (key) { homecoming notseriesnames.every(function (e, i, i) { homecoming key != e }) });

finally, need prepare update, enter, exit structure. here function fixed...

class="snippet-code-js lang-js prettyprint-override">window.onload = function () { console.clear(); var margin = { top: 10, right: 10, bottom: 35, left: 30 }, width = 400 - margin.left - margin.right, height = 150 - margin.top - margin.bottom; var x0 = d3.scale.ordinal() .rangeroundbands([0, width], 0.1); var x1 = d3.scale.ordinal(); var y = d3.scale.linear() .range([height, 0]); var color = d3.scale.ordinal() .range(["#fd8c25", "#99abc4"]); var xaxis = d3.svg.axis() .scale(x0) .orient("bottom"); var year = 1979; var yaxis = d3.svg.axis() .scale(y) .orient("left") .tickformat(d3.format(".2s")); var svg = d3.select("body").append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); var request_data = d3.csv("http://www.sfu.ca/~gdwang/sex.csv", function (error, data) { d3.select("#sexyear").on("change", function () { update(+this.value); }); d3.select("#sexyear").on("input", function () { update(+this.value); }); update(year); // update year function update(sexyear) { var notseriesnames = ['cause', 'year', 'series'] console.log('update ', sexyear); // adjust text on year slider d3.select("#sexyear-value").text(sexyear); d3.select("#sexyear").property("value", sexyear); var yeardata = data.filter(function (element) { homecoming element.year == sexyear }); var seriesnames = d3.keys(yeardata[0]).filter(function (key) { return notseriesnames.every(function (element, idnex, array) { return key != element }) }); yeardata.foreach(function (d) { d.series = seriesnames.map(function (name) { homecoming { name: name, value: +d[name] }; }); }); x0.domain(yeardata.map(function (d) { homecoming d.cause; })); x1.domain(seriesnames).rangeroundbands([0, x0.rangeband()]); y.domain([0, d3.max(yeardata, function (d) { homecoming d3.max(d.series, function (d) { homecoming d.value; }); })]); //cause groups //update var causeupdate = svg.selectall(".cause") .data(yeardata), //enter ****native d3 side effect**** come in selection added update selection causeenter = causeupdate.enter().append("g") .attr("class", "cause") .attr("transform", function (d) { homecoming "translate(" + x0(d.cause) + ",0)"; }), //exit causeexit = causeupdate.exit().remove(), //series groups //update seriesupdate = causeupdate.selectall("rect") .data(function (d) { return d.series; }); //enter ****native d3 side effect**** come in selection added update selection seriesupdate.enter().append("rect") //update + come in seriesupdate.attr("width", x1.rangeband()) .style("fill", function (d) { return color(d.name); }) .transition() .attr("x", function (d) { return x1(d.name); }) .attr("y", function (d) { return y(d.value); }) .attr("height", function (d) { return height - y(d.value); }) //exit seriesupdate.exit().remove() } //draw bars svg.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + height + ")") .call(xaxis) .selectall('text') .attr('transform', 'rotate(-15)') .style('text-anchor', 'end'); svg.append("g") .attr("class", "y axis") .call(yaxis) .append("text") .attr("transform", "rotate(-90)") .attr("y", 6) .attr("dy", ".71em") .style("text-anchor", "end") .text("potential years lost"); d3.selectall(".tick > text") .style("font-size", 6); }) }; class="snippet-code-css lang-css prettyprint-override">body { font: 10px sans-serif; } .axis path, .axis line { fill: none; stroke: #000; shape-rendering: crispedges; } .bar { fill: steelblue; } .x.axis path { display: none; } class="snippet-code-html lang-html prettyprint-override"><script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <label for="sexyear" style="display: inline-block; width: 200px; text-align: right"> year = <span id="sexyear-value">…</span> </label> <input type="range" min="1979" max="1999" id="sexyear">

d3.js