相关疑难解决方法(0)

我正在研究[这] [1] d3项目.基本上我正在尝试创建一个类似SQL的查询构建器.我可以将盒子放到绘图区域和盒子内的其他操作员.然后我应该能够将它们连接起来.我试图翻译2个嵌套在组中的图像.我想移动大盒子里的小物品.我可以分别改造大箱子和小型运营商.问题发生当我尝试先移动小型操作员时.我想移动小型运营商,然后是大箱子.同时我想保持小型运营商和大型箱子的相对位置相同.但是当我在移动一个小盒子后尝试移动大盒子时,它会重置它的位置.这是我在jsfiddle中的工作演示

<g id="draw">

    <rect class="container" height="400" width="400" x="0" y="0" style="fill:gray"></rect>

    <g class="qbox" id="qbox">

        <line id="dummyLine" x1="0" x2="0" y1="0" y2="0" visibility="hidden"
              style='stroke:red; stroke-width:4px'></line>

        <image x="10" y="10" class="container" initial-x="10" initial-y="10" xlink:href="http://i60.tinypic.com/20ic9e.png"
               width="110"
               height="110"></image>
        <circle class="left" id="qbox-left" initial-cx="10" initial-cy="65" cx="10" cy="65" r="5"
                style="fill:red"></circle>
        <circle class="right" id="qbox-right" initial-cx="120" initial-cy="65" cx="120" cy="65" r="5"
                style="fill:red"></circle>

        <g id="op1" class="op">
            <image class="opim" x="10" y="10" class="container" initial-x="10" initial-y="10"
                   xlink:href="http://i58.tinypic.com/imlzs9.png" width="50"
                   height="50"></image>
            <circle id="op1-left" class="left" initial-cx="10" initial-cy="35" cx="10" cy="35" r="5"
                    style="fill:red"></circle>
            <circle id="op1-right" class="right" initial-cx="60" initial-cy="35" …