Question

我正在动态创建矩形，我将其中一个数据值作为文本分配给矩形。在开发人员工具中，我可以看到值，但不能看到矩形。

代码：

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}]

Answer 1

您需要将矩形附加到标记，然后将文本附加到该标记。所以基本上'g'标签将是rect和text的父级：））

正如评论中所提到的，这是一个很好的问题：

SVG: text inside rect

将文本分配给不起作用的矩形

1 个答案: