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
Post a Comment