d3将文本添加到SVG rect

我是d3.js的初学者，我想在rect中添加一些文本和rect

这是我的密码：

            if (!_svg) {
            _svg = d3.select("#col1").append("svg")
                    .attr("height", _height - 2)
                    .attr("width", _width - 2);
        }

        _svg.append("text").attr({
            id: "leftDomainName",
            x: d3.select("svg").attr("width") / 14,
            y: d3.select("svg").attr("height") / 2,
            class: "vertical-text"
        }).text("Business Development");

        var g = _svg.append("g").attr("transform", function (d, i) {
            return "translate(0,0)";
        }).attr("clip-path", "url(#body-clip)");


        var mainBox = g.append("rect").attr({
            id: "mainBox",
            x: d3.select("svg").attr("width") / 8,
            y: 3,
            width: _width - 60,
            height: _height / 3,
            fill: "#D7FFEC"
        });

        mainBox.append("text").text("sample!!!");
        mainBox.append("rect").attr({
            x: 50,
            y: 50,
            width: _width - 60,
            height: _height / 3,
            fill: "red"
        });

我想添加一个文本和矩形svg内部主框。在chrome开发工具中，我可以看到它们被添加了，但页面中没有

我怎么了？ 多谢各位

我将g附加到mainBox，然后将我的元素附加到该g，但它不起作用

---

您不能将

文本添加到SVG中的
rect
元素中。要实现所需功能，请添加一个
g
元素，该元素同时包含
text
和
rect
：

g.append("text").text("sample!!!");

而不是

mainBox.append("text").text("sample!!!");

不能在SVG中向
rect
元素添加
text
。要实现所需功能，请添加一个
g
元素，该元素同时包含
text
和
rect
：

g.append("text").text("sample!!!");

而不是

mainBox.append("text").text("sample!!!");

你是说主机箱里面？我做了，但没用。我将我的新代码添加到qustion部分啊，看起来您已经将所有这些附加到了另一个
rect
元素。出于同样的原因，这不起作用——如果您想对元素进行分组，请使用
g
元素。在您的评论之后，我对它们进行了分组，但没有起作用。请参阅有问题的部分中的粗体和斜体行不要附加到
mainBox
，附加到
g
。您是说在mainBox内部？我做了，但没用。我将我的新代码添加到qustion部分啊，看起来您已经将所有这些附加到了另一个
rect
元素。出于同样的原因，这不起作用——如果要对元素进行分组，请使用
g
元素。在您的评论之后，我对它们进行了分组，但没有起作用。请参阅相关部分中的粗体和斜体行不要附加到
mainBox
，附加到
g
。