Javascript d3 rect没有出现

我想显示一些数据的图例（标题？）。 对于图例的每个部分，我都会在父除法后附加一个rect和一个p。 问题是rect没有出现

这是我的密码：

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

现在，当我检查我的网页内容时，我得到了rect和p，但是rect：

他没有出现

宽度似乎为0（用firefox显示其区域）

我的密码有错误吗？有没有更好的方法来实现这一点？我对javascript和d3.js非常陌生，所以请宽容一点^^

更新 这就是我的结尾。
HTML:

---

为rect设置X+Y值：

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

---

类似于

的SVG元素不能是html

元素的直接子元素。您必须将它们放入一个

容器元素中。

您是否尝试过设置

rect

的

x

和

y

属性？是的，我尝试过，没有任何变化我不知道JSFiddle，请给我一些时间，我将尝试设置一个：）sweet，一旦设置好了，修复起来应该不会太难好吧，所以我尝试设置一个轻版本的代码，我希望这不会改变任何问题。这就是为什么^^^^我以前很困惑，但是是的，你必须修改你的HTML并附加到好的，我现在可以显示一个rect。我想我仍然需要翻译其余的文字，并稍作调整，使它们出现在每个图例的前面，但是，是的，这是解决方案。非常感谢。

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

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