D3JS嵌套插入。 SVG的示例:文本到组

时间:2013-01-18 09:10:11

标签: javascript svg d3.js

我一直在检查有关D3JS关于加入和嵌套的一些教程,但是我无法解决下一个问题,我也在查看像http://bl.ocks.org/4061961这样的例子,但我找不到所有魔法之间的解决方案。 / p>

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

所以我在DOM中获得的是: HTML - >身体 - > SVG - > G HTML - >身体 - > SVG - > TEXT

我喜欢的是这个: HTML - >身体 - > SVG - > G - > TEXT

我的小测试代码就是这个:

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/

1 个答案:

答案 0 :(得分:3)

这个怎么样?

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