d3.js - D3. Can more then one element be associated with a single datum? -

the canonical d3 idiom looks this:

svg.selectall("circle")     .data(data)   .enter().append("circle") 

this associates 1 datum 1 element (sgv, div, whatever.). possible associate more 1 element datum , render them each in different ways based on metadata associated single datum.

in case have histogram d3.layout.histogram. each histogram bin aggregate value composed of sub pieces. want render aggregate render sub-pieces atop aggregate.

i prefer not create separate histogram each sub-piece.

possible?

as @mark mentioned in comment, desired behaviour can achieved using nested selections.

the basic example mike bostock following:

var matrix = [   [ 0,  1,  2,  3],   [ 4,  5,  6,  7],   [ 8,  9, 10, 11],   [12, 13, 14, 15], ]; var td = d3.selectall("tbody tr")   .data(matrix) .selectall("td")   .data(function(d, i) { return d; }); // d matrix[i] 

first bind data "parent elements", tr in example. each element in array matrix assigned 1 tr element.

inside trelements, can select sub-pieces , assign them corresponding data calling data() function parameter. way inside of each tr there 4 td elements corresponding number assigned it.

to append elements , display numbers inside table, following:

var matrix = [   [ 0,  1,  2,  3],   [ 4,  5,  6,  7],   [ 8,  9, 10, 11],   [12, 13, 14, 15], ]; var table = d3.select("body").append("table");  var tr = table.selectall("tr")   .data(matrix) .enter().append("tr");  var td = tr.selectall("td")   .data(function(d) { return d; }) .enter().append("td").text(function(d){return d;});