d3js svg图编辑器堆栈元素

Question

我目前正在开发SVG中的图表编辑器。 （就像在Papyrus中使用javascript一样）。

到目前为止，我可以创建节点并调整它们并拖动它们。

但现在我遇到了问题（Child在父母之外）：

所以解释这张照片。如果我点击背景（红色），父母会产生（绿色）。现在，如果我单击父项，则子项生成（黄色）但不应显示在父项外部。也许我想添加滚动条，以便我可以在父级内部滚动以查看完整的子项，但首先，它不应显示在父级之外。

我的svg结构如下所示：

<div id="diagram_container">   
     <svg width="5000" height="5000">
        <g ("rootg")>
            <g ("innerg")>
                <rect id="parent" x="100" y="100" width="200" height="200"></rect>
                <rect id="child" x="150" y="150" width="100" height="100"></rect>
            </g>
        </g>
    </svg>

也许我已经在结构中遇到了问题，或者它只是一个缺失的属性。

有人可以告诉我正确的方法吗？