我一直在检查有关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>
答案 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; } );