javascript - Updating a stacked bar chart in d3.js (includes JSFiddle) -

javascript - Updating a stacked bar chart in d3.js (includes JSFiddle) -

jsfiddle illustration can seen here

i'm expecting chart update correctly new dataset contained in function "redraw", isn't happening.

although current rects updated new dataset, issue seems enter().append() part of code isn't working:

var groups = svg.selectall('g') .data(dataset, retd); groups.style('fill', function (d, i) { homecoming colours(i); }); groups.enter() .append('g') .style('fill', function (d, i) { homecoming colours(i); }); groups.exit().remove(); //update rects var rects = groups.selectall('rect') .data(function (d) { homecoming d; }, thisy); rects.transition() .attr('x', function (d) { homecoming xscale(d.x0); }) .attr('y', function (d, i) { homecoming yscale(d.y); }) .attr('height', function (d) { homecoming yscale.rangeband(); }) .attr('width', function (d) { homecoming xscale(d.x); }); rects.enter() .append('rect') .attr('x', function (d) { homecoming xscale(d.x0); }) .attr('y', function (d, i) { homecoming yscale(d.y); }) .attr('height', function (d) { homecoming yscale.rangeband(); }) .attr('width', function (d) { homecoming xscale(d.x); });

any help/insight appreciated.

since first draw worked fine, turned function. had remove written svg create reusable: jsfiddle

<button id="reset">redraw</button> <script> document.getelementbyid('reset').onclick = function() { var dataset = [ {"data":[ {"issuemonth":"apr","is":"350","month":"apr"}, {"issuemonth":null,"is":"100","month":"aug"}, {"issuemonth":null,"is":"0","month":"dec"}], "name":"chf"}, {"data":[ {"issuemonth":null,"is":"100","month":"apr"}, {"issuemonth":null,"is":"200","month":"aug"}, {"issuemonth":null,"is":"40","month":"dec"}], "name":"gbp"} ]; drawit(dataset); } var dataset = [ {"data":[ {"issuemonth":"apr","is":"350","month":"apr"}, {"issuemonth":null,"is":"0","month":"aug"}, {"issuemonth":null,"is":"0","month":"dec"}], "name":"chf"}, {"data":[ {"issuemonth":null,"is":"100","month":"apr"}, {"issuemonth":null,"is":"0","month":"aug"}, {"issuemonth":null,"is":"50","month":"dec"}], "name":"gbp"} ]; drawit(dataset); function drawit(dataset) { var margins = { top: 40, left: 40, right: 40, bottom: 40 }; var width = 400; var height = 500 - margins.top - margins.bottom; var series = dataset.map(function (d) { homecoming d.name; }); var dataset = dataset.map(function (d) { homecoming d.data.map(function (o, i) { // construction numeric // axis (the stacked amount) y homecoming { y: +o.is, x: o.month }; }); }); stack = d3.layout.stack(); stack(dataset); var dataset = dataset.map(function (group) { homecoming group.map(function (d) { // invert x , y values, , y0 becomes x0 homecoming { x: d.y, y: d.x, x0: d.y0 }; }); }); d3.select("svg").remove(); var svg = d3.select('body') .append('svg') .attr('width', width + margins.left + margins.right) .attr('height', height + margins.top + margins.bottom) .attr('transform', 'translate(' + margins.left + ',' + margins.top + ')') var xmax = d3.max(dataset, function (group) { homecoming d3.max(group, function (d) { homecoming d.x + d.x0; }); }) var xscale = d3.scale.linear() .domain([0, xmax]) .range([0, width]); var months = dataset[0].map(function (d) { homecoming d.y; }); var yscale = d3.scale.ordinal() .domain(months) .rangeroundbands([0, height], .1); var xaxis = d3.svg.axis() .scale(xscale) .orient('bottom'); var yaxis = d3.svg.axis() .scale(yscale) .orient('left'); var colours = d3.scale.category20(); var groups = svg.selectall('g') .data(dataset) .enter() .append('g') .style('fill', function (d, i) { homecoming colours(i); }); var rects = groups.selectall('rect') .data(function (d) { homecoming d; }) .enter() .append('rect') .attr('x', function (d) { homecoming xscale(d.x0); }) .attr('y', function (d, i) { homecoming yscale(d.y); }) .attr('height', function (d) { homecoming yscale.rangeband(); }) .attr('width', function (d) { homecoming xscale(d.x); }); svg.append('g') .attr('class', 'x axis') .attr('transform', 'translate(0,' + height + ')') .call(xaxis); svg.append('g') .attr('class', 'y axis') .call(yaxis); } </script>

javascript d3.js