CODEWITHSUNDEEP
javascriptd3.jssvg
ggt
ggt

Reputation: 331

Nest multiple rects inside multiple svg containers with d3?

I am trying to nest an individual rect inside each svg element created in the g element, but I can't seem to get it to work.

Here is my code + Plnk;

Plunker

var bar = g.selectAll(".barContainer")
    .data(thisData.labels)
    .enter()

  bar
    .append("svg")
    .attr("class", "barContainer")

  bar
    .insert('rect')
    .attr('width', function(d) {
      console.log(d)
      return d.value
    })
    .attr('height', 20)
    .attr('x', 0)
    .attr('y', 0)

Currently the DOM is displaying the rect and container class on the same level, where as I would like to nest the rect inside each container.

I've tried a few things but can't seem to crack it, I was hoping someone could point me in the right direction?

Thanks

Upvotes: 0

Views: 670

Answers (1)

thatOneGuy
thatOneGuy

Reputation: 10612

You have a 'g' element which you append the svg to and then you also append the rect to the 'g'. You want to append the rect to the svg element you create. Something like this : 

var bar = g.selectAll(".barContainer")
    .data(thisData.labels)
    .enter()

  var barRectSVG = bar
    .append("svg")
    .attr("class", "barContainer")

  barRectSVG 
    .insert('rect')
    .attr('width', function(d) {
      console.log(d)
      return d.value
    })
    .attr('height', 20)
    .attr('x', 0)
    .attr('y', 0)

Updated plnkr : http://plnkr.co/edit/WYbjT7ekjUuopzs0H9Pi?p=preview

Upvotes: 3

Related Questions