javascript - 如何在D3中旋转图形？

Question

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

得到 this example ，试图实现相同的行为。无法理解，错误在哪里 - 人物在摇晃，没有按照应有的方式旋转。

  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或者，片段 View :

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。在您的拖动事件中，您旋转父对象。这很重要，因为:

• 容器为拖动事件设置坐标系(参见文档 here)。
• 通过旋转 g，您可以在拖动过程中改变坐标系。

我们真正想要的是一个固定的坐标系来引用拖动事件，SVG 本身就可以了，或者父 g - 每次拖动都不会改变其变换的东西。因此，让我们将拖动容器设置为类似于旋转 g 的父级。旋转的 g 的父级是你的带有静态坐标系的 svg，所以让我们试试:

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

这似乎避免了紧张并让我们顺利过渡(更新 fiddle )

这里有一个简化的片段来演示相同的功能:

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>

在我依赖的片段中 this作为从点获取 Angular 快速简单示例