d3.js - Why isn't my updated data re-rendering? -


i'm playing around "update" pattern in d3.js. creating simple bar graph update data when press "change" button.

my problem when press "change" button, first 3 rendered bars not re-rendered. debugged , saw data applied (__data__ correct) re-application failed.

here code , link in codepen:

var mydata = [ 100, 200, 300 ];  d3.select('body').append('button').text("change").on("click", function() {   mydata = [200, 400, 600, 700, 800, 900, 1000];   update(mydata); });  var svg = d3.select('body').append('svg')   .attr("class", "chart")   .attr("y", 30);  var update = function(data) {   var bars = svg.selectall('g')     .data(data);    var groups = bars.enter()     .append("g")     .attr("transform", function(d,i) {return "translate(0," + i*25 + ")"});    groups     .append("rect")     .attr("height", 25)     .attr("fill", "pink")     .attr("stroke", "white");    groups     .append("text")     .attr("x", 10)     .attr("y", 18)     .attr("fill", "red");    bars.selectall("rect")     .attr("width", string);    bars.selectall("text")     .text(string); };   update(mydata);  

it works if change .selectall() in update selection handling .select():

bars.select("rect")   .attr("width", string);  bars.select("text")   .text(string); 

by using selectall(), you're accessing data bound elements you're selecting (i.e. rectangles , text elements), bound when appended elements. data hasn't been updated though you've updated containing g elements. using .select() instead binds new data child elements.

the general pattern you're using nested selection , can bit confusing start , lead unexpected results.


Comments

Popular posts from this blog

linux - xterm copying to CLIPBOARD using copy-selection causes automatic updating of CLIPBOARD upon mouse selection -

c++ - qgraphicsview horizontal scrolling always has a vertical delta -