Adding Multiple Rect per data element in d3

Question

Using d3, I am trying to write a script to visualize the size of a number by showing it composed of individual blocks . So the number 5 would be composed of 5 rectangle. The general syntax to create rectangles within the svg is something as follows.

var p = d3.select("body").selectAll("p")
    .data([5, 3, 10])
    .enter()
    .append("rect) 
    ...

However, what I really want is something that append multiple rectangles per data element.

var p = d3.select("body").selectAll("p")
    .data([5, 3, 10])
    .enter()
    .do(CreatedRectangles(d))

Anyone know how to do this easily?

Lars Kotthoff · Accepted Answer · 2014-01-13 18:20:25Z

5

You can use a nested selection and d3.range() for this:

d3.select("body")
  .selectAll("p")
  .data([5,3,10])
  .enter()
  .append("p")
  .selectAll("p")
  .data(function(d) { return d3.range(d); })
  .enter()
  .append("p")
  .html(String);

Demo here.

You can use your .do() as well, except that it's called .each(). CreateRectangle() would look something like this.

function CreateRectangle(d) {
  d3.select(this).selectAll("p").data(d3.range(d)).enter().append("p").html(String);
}

It works similarly with SVG and rect elements.

answered Jan 13, 2014 at 18:20

Lars Kotthoff

109k16 gold badges210 silver badges210 bronze badges

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

Collectives™ on Stack Overflow

Adding Multiple Rect per data element in d3

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related