Nested SVG node creation in d3.js

Question

I'v just started playing with d3js and find it strange that I have to create multiple selectors for each element I want to link to the background data structure for example separate selectors such as one for overlay text and one for rectangles to make an annotated bar graph.

svg.selectAll("rect")
.data(data)
.enter()
    .append("rect")
    .attr('y',function(d,i){return i*10;})
    .attr('height',10)
    .attr('width',function(d){return d.interestingValue})
    .fill('#00ff00');

svg.selectAll("text")
.data(data)
.enter()
    .append("text")
    .attr('y',function(d,i){return i*10;})
    .fill('#0000ff')
    .text(function(d){return d.interestingValue});

Is there a more convenient way of combining these into a single selection and enter() chain that creates both the rects and the text elements?

mbostock · Accepted Answer · 2012-07-06 16:04:39Z

20

Use a G (group) element. Use a single data-join to create the G elements, and then append your rect and text element. For example:

var g = svg.selectAll("g")
    .data(data)
  .enter().append("g")
    .attr("transform", function(d) { return "translate(0," + i * 10 + ")"; });

g.append("rect")
    .attr("height", 10)
    .attr("width", function(d) { return d.interestingValue; });

g.append("text")
    .text(function(d) { return d.interestingValue; });

answered Jul 6, 2012 at 16:04

mbostock

51.8k13 gold badges178 silver badges130 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Baxter Over a year ago

And it comes from the man himself! thanks for the response and a great library.

Jim Hunziker Over a year ago

I wasn't able to get this to work for dynamic data updates unless I set data bindings on the sub-elements with .data(). With the above code, an update to the data bound to g re-drew the elements within the g using the originally bound data.

mbostock Over a year ago

Right; binding data to parent elements doesn’t automatically propagate it to children. You need to perform one of the following in order to propagate data from parent to child: data, datum, select, append or insert. See also my tutorial on nested selections.

Collectives™ on Stack Overflow

Nested SVG node creation in d3.js

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related