1

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

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

所以我在 DOM 中得到的是：HTML -> BODY -> SVG -> G HTML -> BODY -> SVG -> TEXT

我喜欢的是：HTML -> BODY -> 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/

4

1 回答 1

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; } );
于 2013-01-18T09:28:26.733 回答