Question

I have been checking some tutorials about D3JS about joining and nesting, but I can not solve the next problem, I was also checking example like http://bl.ocks.org/4061961 but I don’t find the solution between all the magic.

So, I have an array of elements, with this array I can create a “g” label for each element, and I can create a “text” label for each element, but I can not manage to put the “text” label inside the “g” label.

So what a I get in the DOM is this:
HTML -> BODY -> SVG -> G
HTML -> BODY -> SVG -> TEXT

And what I’ll like is this:
HTML -> BODY -> SVG -> G -> TEXT

My small testing code is this one:

data = ["1", "2", "3", "4", "5"];

// Grups de selecció
svg.selectAll("svg_group")
  .data(data)
  .enter()
  .append("g")
  .attr("class", 'svg_group');

// Text dels dies / anys
svg.selectAll("g .svg_group")
  .data(data)
  .enter()
  .append("text")
  .text( function(d) { return d; } );

I’ll appreciate any help. Thanks in advance.

Update 16:08

I need to add more than one element to the group and if possible in two steps. Now I have this in the DOM:

  <svg id="gantt" width="500" height="500">
    <g class="svg_group">
    <g class="svg_group">
    <g class="svg_group">
    <g class="svg_group">
    <g class="svg_group">
    <text>1</text>
    <text>2</text>
    <text>3</text>
    <text>4</text>
    <text>5</text>
    <line>1</line>
    <line>2</line>
    <line>3</line>
    <line>4</line>
    <line>5</line>  
  </svg>

And I like something like this:

  <svg id="gantt" width="500" height="500">
    <g class="svg_group">
      <text>1</text>
      <line>1</line>
    </g>
    <g class="svg_group">
      <text>2</text>
      <line>2</line>
    </g>
    <g class="svg_group">
      <text>3</text>
      <line>3</line>
    </g>
    <g class="svg_group">
      <text>4</text>
      <line>4</line>
    </g>
    <g class="svg_group">
      <text>5</text>
      <line>5</line>
    </g>
  </svg>

Example in:
http://jsfiddle.net/y394h/10/

Answer 1

How about this?

svg.selectAll("svg_group")
  .data(data)
  .enter()
  .append("g")
  .attr("class", 'svg_group')
  .append("text")
  .text( function(d) { return d; } );

or

var group = svg.selectAll("svg_group")
  .data(data)
  .enter()
  .append("g")
  .attr("class", 'svg_group');

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