Javascript 附加非嵌套元素

我正在用D3构建svg。我想对path元素使用clipping，但在为clipPath添加defs部分时遇到问题

这是我的密码：

function build_svg(div,width,height) {
    var margin={left: 10, top: 20}; 
    return div.append("svg")
    .attr("width", "100%")
    .attr("height", "100%")
    .append("defs")
    .append("clipPath")
        .append("rect")
        .attr("x", margin.left)
        .attr("y", margin.top)
        .attr("width", width)
        .attr("height", height)
    .insert("g","defs")
    .attr("transform", "translate("+margin.left+","+margin.top+")");
}

我明白了：

<svg width="100%" height="100%">
    <defs>
        <clipPath>
            <rect x="40" y="10" width="651" height="214">
                <g transform="translate(40,10)">
                .....
                </g>
            </rect>
        </clipPath>
    </defs>
</svg>

但我想要这个：

<svg width="100%" height="100%">
    <defs>
        <clipPath>
            <rect x="40" y="10" width="651" height="214"></rect>
        </clipPath>
    </defs>
    <g transform="translate(40,10)">
       .......
    </g>
</svg>

---

我的错误在哪里？

现在你有一个单链，因此你得到的结构是预期的

所以，与其这样，不如打破你的锁链。首先，命名SVG选择：

const svg = div.append("svg")
    .attr("width", "100%")
    .attr("height", "100%");

然后：

svg.append("defs")
    .append("clipPath")
    .append("rect")
    .attr("x", margin.left)
    .attr("y", margin.top)
    .attr("width", width)
    .attr("height", height);

svg.append("g", "defs")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

请注意，您希望附加组，而不是插入组

下面是演示，运行它并检查SVG：

功能构建_svgdiv，宽度，高度{ var保证金={ 左:10,， 前20名 }; const svg=div.appendsvg .宽度，100% .身高100%； svg.appenddefs .附录Clippath .appendrect .attrx，margin.left .attry，margin.top .宽度，宽度 .身高,身高,； svg.appendg，defs .attransform，translate+margin.left+，+margin.top+； }; const div=d3。选择mydiv； 建造(svgdiv,200200)

---

杰拉尔多，你是我的英雄-