Question

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

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

所以我在DOM中获得的是： HTML - ＆gt;身体 - ＆gt; SVG - ＆gt; G HTML - ＆gt;身体 - ＆gt; SVG - ＆gt; TEXT

我喜欢的是这个： HTML - ＆gt;身体 - ＆gt; SVG - ＆gt; G - ＆gt; 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/

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

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

1 个答案: