Javascript D3 JS-包含SVG矩形的组赢得'；拖动时不能平稳地平移

我使用D3拖动事件在SVG容器上创建了一个矩形

我试图通过在绘制的矩形的父元素上应用二维变换（使用translate（x，y））来实现移动矩形

绘制矩形后，我得到矩形所在容器的边界框值。然后我将（x，y）边界框坐标设置为（0,0），从而将矩形移动到视口的右上角。然后我把它翻译回原来的位置。然后再次应用平移，方法是在拖动矩形时使用鼠标事件坐标更新平移

     d3.select('#rectangle').on('click', function(){ new Rectangle(); } );

function Rectangle(){

    var rectData = []; //holds the diagonal point 1 and 2 coordinates of the rectangle
    var rectContainer; // g element
    var shape = {}; //will hold the rectangle's d3 selections
    var start; //starting point
    var edge; //ending point
    var gData = {}; //holds translate values for g element

//    console.log(this);

    var rectangleDrag =  svgCanvas.call(d3.drag().on("start", initialPlod)
        .on('drag', secondaryPlod)
        .on('end', onStopDraw));

    //start rendering on drag start
    function initialPlod(){
        start = d3.mouse(this);
//      console.log(start);
        rectData = [{x:start[0], y:start[1]}, {x:start[0], y:start[1]}];
        rectContainer = svgCanvas.append("g");
        shape.rectEl = rectContainer.append('rect').attr('class', 'rectangle');
        renderRectangle();
    }

    //when continuing to drag from point 2
    function secondaryPlod(){
        edge = d3.mouse(this);
        rectData[1] = {x: edge[0], y: edge[1]};
        renderRectangle();
    }

    //on stop drawing bind a drag event
    function onStopDraw(){

        svgCanvas.call(d3.drag().on("start", null)
            .on('drag', null)
            .on('end', null));

        var bbox = shape.rectEl._groups[0][0].getBBox();
        console.log(this);
        console.log(bbox);

        //temporary variables that hold original position
        var rectCords = {
            x: bbox.x,
            y: bbox.y
        };

        //setting boundingbox to 0,0 coordinates
        bbox.x = 0;
        bbox.y = 0;

//      console.log(bbox);

        shape.rectEl.attr("x", bbox.x).attr("y", bbox.y);

        gData.x = rectCords.x;
        gData.y = rectCords.y;

        rectContainer.attr("transform", "translate(" + gData.x + "," + gData.y + ")");

        shape.rectEl.call(d3.drag().on("drag", dragRect));
    }

    //grab and drag rectangle
    function dragRect() {
        var move = d3.event;
        rectContainer.attr("transform", "translate(" + (gData.x += move.dx)  + "," + (gData.y += move.dy) + ")");
    }

    /**
     *
     * Method takes the x,y coordinates from rectData object array
     * which contains coordinates of point1 and point2
     * and calculates the the height and width
     *
     */
    function renderRectangle(){
        //rectangle attributes
        var xCoord = rectData[1].x - rectData[0].x > 0 ? rectData[0].x :  rectData[1].x;
        var yCoord = rectData[1].y - rectData[0].y > 0 ? rectData[0].y :  rectData[1].y;
        var width = Math.abs(rectData[1].x - rectData[0].x);
        var height = Math.abs(rectData[1].y - rectData[0].y);

        //render rectangle
        shape.rectEl.attr("x",xCoord)
            .attr("y", yCoord)
            .attr("width",width)
            .attr("height",height);
    }

}

矩形可以平移，但不稳定。但是，如果我将相同的技术应用于SVG循环，则只需鼠标拖动即可很好地转换。两个形状可以在同一视口中绘制

---

以下是我设法找到问题原因的答案

我已经将拖动事件绑定到g元素中的矩形元素，这似乎导致了拖动矩形时的不稳定转换。因为我在拖动矩形时平移g元素，所以可能是它导致了问题

我将拖动事件绑定到矩形容器（g元素）元素，现在拖动时它会平滑地转换

    //on stop drawing bind a drag event
    function onStopDraw(){

        svgCanvas.call(d3.drag().on("start", null)
            .on('drag', null)
            .on('end', null));

        var bbox = shape.rectEl._groups[0][0].getBBox();
        console.log(this);
        console.log(bbox);

        //temporary variables that hold original position
        var rectCords = {
            x: bbox.x,
            y: bbox.y
        };

        //setting boundingbox to 0,0 coordinates
        bbox.x = 0;
        bbox.y = 0;

//      console.log(bbox);

        shape.rectEl.attr("x", bbox.x).attr("y", bbox.y);

        gData.x = rectCords.x;
        gData.y = rectCords.y;

        rectContainer.attr("transform", "translate(" + gData.x + "," + gData.y + ")");

//bound the drag event to the entire g element of the rectangle
            rectContainer.call(d3.drag().on("drag", dragRect));
        }

这是我的建议