javascript - D3JS 嵌套插入。 SVG : text into group 示例

Question

我一直在查看有关 D3JS 的一些关于连接和嵌套的教程，但我无法解决下一个问题，我也在查看类似 http://bl.ocks.org/4061961 的示例但我没有找到所有魔法之间的解决方案。

所以，我有一个元素数组，使用这个数组我可以为每个元素创建一个“g”标签，我可以为每个元素创建一个“文本”标签，但我无法将“文本” “g”标签内的“标签。

所以我在 DOM 中得到的是这样的:HTML -> 正文 -> SVG -> GHTML -> 正文 -> SVG -> 文本

我想要的是:HTML -> 正文 -> SVG -> G -> 文本

我的小测试代码是这个:

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; } );

我将不胜感激任何帮助。提前致谢。

16:08 更新

我需要向组中添加多个元素，如果可能的话分两步进行。现在我在 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>

我喜欢这样的东西:

  <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>

示例: http://jsfiddle.net/y394h/10/

Answer 1

这个怎么样？

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

或

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

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