如何在D3中旋转图形？

Question

任务是用d3旋转图形，类似PowerPoint的方式：

有了这个例子 ，尝试实现相同的行为。 无法理解，错误在哪里 - 身材在颤抖，是不是应该旋转的方式。

  function dragPointRotate(rotateHandleStartPos) {

    rotateHandleStartPos.x += d3.event.dx;
    rotateHandleStartPos.y += d3.event.dy;

    const updatedRotateCoordinates = r

    // calculates the difference between the current mouse position and the center line
    var angleFinal = calcAngleDeg(
      updatedRotateCoordinates,
      rotateHandleStartPos
    );
    // gets the difference of the angles to get to the final angle
    var angle =
      rotateHandleStartPos.angle +
      angleFinal -
      rotateHandleStartPos.iniAngle;

    // converts the values to stay inside the 360 positive
    angle %= 360;
    if (angle < 0) {
      angle += 360;
    }

    // creates the new rotate position array
    var rotatePos = [
      angle,
      updatedRotateCoordinates.cx,
      updatedRotateCoordinates.cy,
    ];

    r.angle = angle

    d3.select(`#group`).attr('transform', `rotate(${ rotatePos })`)

  }

这是一个JSFiddle ，也可以是一个片段视图：

 const canvas = document.getElementById('canvas') d3.select(canvas).append('svg') .attr('width', '500') .attr('height', '500') .append('g') .attr('id', 'group') .append('rect') .attr('width', '100') .attr('height', '100') .attr('x', '100') .attr('y', '100') d3.select('#group').append('circle') .attr('r', '10') .attr('cx', '150') .attr('cy', '80') .call(d3.drag() .on('start', startRotation) .on('drag', rotate) ) let rotateHandleStartPos, r = { angle: 0, cx: 0, cy: 0 } function startRotation () { const target = d3.select(d3.event.sourceEvent.target) r.cx = getElementCenter().x r.cy = getElementCenter().y let updatedRotateCoordinates = r // updates the rotate handle start posistion object with // basic information from the model and the handles rotateHandleStartPos = { angle: r.angle, // the current angle x: parseFloat(target.attr('cx')), // the current cx value of the target handle y: parseFloat(target.attr('cy')), // the current cy value of the target handle }; // calc the rotated top & left corner if (rotateHandleStartPos.angle > 0) { var correctsRotateHandleStartPos = getHandleRotatePosition( rotateHandleStartPos ); rotateHandleStartPos.x = correctsRotateHandleStartPos.x; rotateHandleStartPos.y = correctsRotateHandleStartPos.y; } // adds the initial angle in degrees rotateHandleStartPos.iniAngle = calcAngleDeg( updatedRotateCoordinates, rotateHandleStartPos ); } function rotate () { dragPointRotate(rotateHandleStartPos) } function getElementCenter () { const box = document.querySelector('#group > rect').getBBox() return { x: box.x + box.width / 2, y: box.y + box.height / 2, } } function getHandleRotatePosition(handleStartPos) { // its possible to use "cx/cy" for properties var originalX = handleStartPos.x ? handleStartPos.x : handleStartPos.cx; var originalY = handleStartPos.y ? handleStartPos.y : handleStartPos.cy; // gets the updated element center, without rotatio var center = getElementCenter(); // calculates the rotated handle position considering the current center as // pivot for rotation var dx = originalX - center.x; var dy = originalY - center.y; var theta = (handleStartPos.angle * Math.PI) / 180; return { x: dx * Math.cos(theta) - dy * Math.sin(theta) + center.x, y: dx * Math.sin(theta) + dy * Math.cos(theta) + center.y, }; } // gets the angle in degrees between two points function calcAngleDeg(p1, p2) { var p1x = p1.x ? p1.x : p1.cx; var p1y = p1.y ? p1.y : p1.cy; return (Math.atan2(p2.y - p1y, p2.x - p1x) * 180) / Math.PI; } function dragPointRotate(rotateHandleStartPos) { rotateHandleStartPos.x = d3.event.x; rotateHandleStartPos.y = d3.event.y; const updatedRotateCoordinates = r // calculates the difference between the current mouse position and the center line var angleFinal = calcAngleDeg( updatedRotateCoordinates, rotateHandleStartPos ); // gets the difference of the angles to get to the final angle var angle = rotateHandleStartPos.angle + angleFinal - rotateHandleStartPos.iniAngle; // converts the values to stay inside the 360 positive angle %= 360; if (angle < 0) { angle += 360; } // creates the new rotate position array var rotatePos = [ angle, updatedRotateCoordinates.cx, updatedRotateCoordinates.cy, ]; r.angle = angle d3.select(`#group`).attr('transform', `rotate(${ rotatePos })`) } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script> <div id="canvas"></div> 

提前致谢！

Answer 1

问题是拖动的容器。 默认容器是this.parentNode ，其中this是应用拖动的元素。 您将拖动应用于圆圈，其父节点为g 。 在拖动事件中，您可以旋转父项。 这很重要，因为：

• 容器设置拖动事件的坐标系（请参阅此处的文档）。
• 通过旋转g，可以在拖动过程中更改坐标系。

我们真正想要的是一个固定的坐标系来引用拖拽事件，SVG本身就可以了，或者是一个父g - 它不会改变每个拖拽的变换。 所以，让我们将拖动容器设置为旋转g的父级。 旋转g的父级是带有静态坐标系的svg，所以让我们试试：

d3.drag()
    .on('start', startRotation)
    .on('drag', rotate)
    .container(function() { return this.parentNode.parentNode; })

这似乎避免了紧张，并给我们一个平稳的过渡（更新小提琴 ）

这是一个简化的代码片段，用于演示相同的功能：

 var svg = d3.select("svg"); var drag = d3.drag() .on("drag", dragged) // Set coordinate system to a frame of reference that doesn't move. .container(function() { return this.parentNode.parentNode }); var contentG = svg.append("g") .attr("transform","translate(100,100)"); // center of rotation var rotatingG = contentG.append("g"); var circle = rotatingG.append("circle") .attr("cx", 0) .attr("cy", -75) .attr("r", 10) .call(drag); var rect = rotatingG.append("rect") .attr("width", 100) .attr("height", 100) .attr("x", -50) .attr("y", -50); function dragged() { var x = d3.event.x, y = d3.event.y, angle; if (x < 0) { angle = 270 - (Math.atan(y / -x) * 180 / Math.PI); } else { angle = 90 + (Math.atan(y / x) * 180 / Math.PI); } rotatingG.attr("transform","rotate("+angle+")"); } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script> <svg width="500" height="500"></svg> 

在片段中，我依靠这个作为从角度获得角度的快速简单的例子