javascript - d3js svg 图编辑器堆栈元素

Question

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

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

但是现在我遇到了一个问题（孩子在父母之外）：

所以来解释一下这张图。如果我单击背景（红色），则父级会生成（绿色）。现在，如果我单击父级，则子级会生成（黄色），但它不应显示在父级之外。也许我想在那里添加滚动条，这样我就可以在父级内部滚动以查看完整的子级，但首先，它不应该显示在父级之外。

我的 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>

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

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

标签： javascriptd3.jssvgdiagram