d3 fügen Sie text in SVG rect

Ich bin Anfänger in der d3.js und ich möchte hinzufügen, einige text-und rect-innere rect.

hier ist mein code:

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

Möchte ich hinzufügen, dass ein text und svg rect innere mainBox. In Chrom-develper-tools, die ich sehen kann wurde Hinzugefügt, aber die gibt es nicht in Seite

was ist meine falsch?
danke

Ich Anhängen g bis mainBox und dann fügen Sie meine-element von g, aber es hat nicht funktioniert

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