d3将文本添加到SVG rect

Question

我是d3.js的初学者，我想添加一些文本和矩形内部。

这是我的代码：

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

我想添加一个文本和rect svg内部mainBox。在chrome develper工具中，我可以看到它们已添加，但页面

中没有

我错了什么？ 谢谢

我将g附加到mainBox然后将我的元素追加到那个g但它没有工作

            var innerG = mainBox.append("g");

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

Answer 1

您无法在SVG中向text元素添加rect。要实现您的目标，请添加包含g和text的{​​{1}}元素：

rect

而不是

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