D3 JS - 包含SVG矩形的组在拖动时不能平滑地转换

Question

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

我试图通过在绘制的矩形的父元素上应用2D transfoms（使用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圆形，则它在鼠标拖动时转换得很好。两种形状都可以在同一个视口上绘制。

这里的fiddle

Answer 1

我设法找到问题的原因。

我已经将drag事件绑定到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)); 
     } 

这里的fiddle