D3JS嵌套插入。示例與SVG：文本到組

Question

我一直在檢查一些關於D3JS關於加入和嵌套的教程，但我無法解決下一個問題，我也在檢查像http://bl.ocks.org/4061961這樣的示例，但我沒有找到所有魔法之間的解決方案。所以，我有一個元素數組，我可以爲每個元素創建一個「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/

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