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

您不能添加text到rect在SVG元素.为了达到你想要什么,添加一个g同时包含元素text和rect:

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

代替

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