d3 rect не отображается

Question

Я хочу отобразить легенду (подпись?) Некоторых данных. Для каждой части легенды я добавляю rect и p в родительское подразделение. Проблема в том, что прямоугольники не отображаются.

Вот мой код:

var groups = {{ groups|safe }}; 
groups.forEach(function(group, i) { 
    var div = d3.select("#collapse-legend"); 
    div.append("rect") 
     .attr("width", 17) 
     .attr("height", 17) 
     .style("fill-opacity", 1) 
     .style("fill", function (d) { return c(i); }); 
    div.append("p").text(group) 
}); 

Теперь, когда я проверяю содержание моего веб-страницы, я получаю как прямоугольник и р, но прямоугольник:

1. не проявляющейся
2. , по-видимому, имеет ширину 0 (показывает свою область с firefox)

Есть ошибки в моем коде? Есть ли лучшие способы достичь этого? Я очень новичок в Javascript и d3.js поэтому, пожалуйста, быть снисходительным ^^

Update

Так это то, что я закончил.
HTML:

<div ...> 
    <svg id="legend-svg"></svg> 
</div> 

JavaScript:

// set height of svg 
d3.select("#legend-svg").attr("height", 18*(groups.length+1)); 

// for each group, append rect then text 
groups.forEach(function(group, i) { 
    d3.select("#legend-svg").append("rect") 
     .attr("y", i*20) 
     .attr("width", 18) 
     .attr("height", 18) 
     .style("fill-opacity", 1) 
     .style("fill", function (d) { return c(i); }); 
    d3.select("#legend-svg").append("text") 
     .attr("x", 25) 
     .attr("y", i*20+15) 
     .text(group); 
}); 

Answer 1

SVG элементы как <rect> не могут быть прямыми потомками HTML <div> элементов. Вы должны поместить их в контейнерный элемент <svg>.

Answer 2

SET значение X + Y для прямоугольника:

.attr("x", 50) 
.attr("y", 50)