D3.js 将文本指定给不起作用的矩形

我动态创建矩形，并将其中一个数据值作为文本指定给矩形。在开发工具中，我可以看到值，但在矩形上看不到

代码：

---

您需要将矩形附加到标记上，然后将文本附加到该标记上。因此，基本上，“g”标记将是rect和text的父项：）

如评论中所述，这里是一个很好的问题：

---

是的，SVG不支持[rect]上的文本属性，并且不能在rect（）中包含子元素，您需要创建一个g来同时包含rect和SVG:text元素。我添加了一个并替换了代码矩形。追加（“g”）。追加（“SVG:text”）而不是矩形。追加（“text”）但仍然不起作用。否，您需要将g元素附加到svg中，然后将rect和text分别附加到g中。正如我所说，g必须同时包含它们。如果你在谷歌上搜索，就会有很多这样的例子……即使在这里，也有很好的例子：

var x = d3.scale.linear().domain([0, data.length]).range([0, 1200]);

                       console.log(filtereddata);

                       rectangle= svg.selectAll("rect").data(filtereddata).enter().append("g").append("rect");



                       RectangleAttrb = rectangle
                        .attr("id", function (d,i) { return "rectid" + i ; })
                        .attr("x", function (d,i) {
                                                    return x(i);
                                                   })
                        .attr("y", function (d,i) { return 40; })
                        .attr("width",function(d,i) { 
                                                        if(d.value <100) 
                                                        {
                                                            return 50; 
                                                        }
                                                        else 
                                                        {
                                                            return d.value/2 ; 
                                                        }
                                                    } )
                        .attr("height",function(d) { return 40; })
                        .style("stroke", function (d) { return "white";})
                        .style("fill", function(d) { return "#01DF01"; })
                        .on("click",function(d,i) { console.log(d);});

                       console.log(RectangleAttrb);

                       rectangle.append("text")
                      .attr("x", function(d,i) { return x(i) + 5; })
                      .attr("y", 35)
                      .attr("dy", ".35em")
                      .attr("text-anchor", "middle")
                       .attr("fill", "black")
                      .text(function(d) { return d.value; });

[{status:1;value:300},
{status:2;value:200},
{status:3;value:50}]