Генерация пользовательских элементов в d3

Question

Я пытаюсь создать DOM, который заключается в следующем:

<g class="geoms"> 
    <g class="value-labels"> 
     <rect class="text" width="10" height="10" x="10" y="10"></rect> 
     <rect class="text" width="10" height="10" x="10" y="10"></rect> 
    </g> 
</g> 

В основном два прямоугольника элементы внутри наклейке значения и класса геом.

У меня есть следующие:

@svg = d3.select("body").append("g").attr("class", "geoms") 
    @svg.append("g").attr("class", "value-labels") 
    @svg.append("rect").attr("class", "text").attr("width", 10).attr("height", 10).attr("x", 10).attr("y", 10) 
    @svg.append("rect").attr("class", "text").attr("width", 10).attr("height", 10).attr("x", 10).attr("y", 10) 

Проблема с этим кодом, что это HTML он генерирует:

<g class="geoms"> 
    <g class="value-labels"></g> 
    <rect class="text" width="10" height="10" x="10" y="10"></rect>   
    <rect class="text" width="10" height="10" x="10" y="10"></rect> 
</g> 

Как у меня есть класс value-labels окружают мои два прямоугольника?

Answer 1

Держите ссылку на g вы добавляете и добавить rect S к нему:

@svg = d3.select("body").append("g").attr("class", "geoms"); 
var g = @svg.append("g").attr("class", "value-labels"); 
g.append("rect").attr("class", "text").attr("width", 10).attr("height", 10).attr("x", 10).attr("y", 10); 
g.append("rect").attr("class", "text").attr("width", 10).attr("height", 10).attr("x", 10).attr("y", 10);