d3 idiom for appending grouped elements on enter()?

Saturday, May 10, 2014

Is there a better idiom to append a <svg:g> grouped set of elements to a container on an enter() selection as part of a generic update pattern?



var cell = d3.select(this); // parent container

cell = cell
.selectAll('.plot').data([0]); // seems kludgy

cell
.enter().append('g').classed('plot',true); // append the wrapping <g> element

cell = cell
.selectAll("circle")
.data(_.values(slice));

cell
.enter().append("circle"); // general enter() -- create plot elements

cell.attr() // etc. general update--style plot elements

cell
.exit().remove();


Of course,



if ( cell.select('g.plot').empty() ) {
cell = cell.append('g').classed('plot', true);
}


instead of the first two statements would do it too, but this seems like a very common operation and the selectAll().data([0]) seems contrived--is there a more elegant d3 idiom?







http://ift.tt/1jNH9CJ