0

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

ggt
  • 331
  • 1
  • 11

1 Answers1

3

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

thatOneGuy
  • 9,977
  • 7
  • 48
  • 90
  • thanks! is it normal that I can't style each svg ".barContainer" with css so the bars won't appear on top of each other? – ggt Aug 16 '16 at 09:57
  • styling svg elements are different to styling divs etc. Youll have translate the element to position it. See http://stackoverflow.com/questions/479591/svg-positioning – thatOneGuy Aug 16 '16 at 10:01