Как повернуть фигуру в 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; })

Это, кажется, позволяет избежать дрожания и дает нам плавный переход (обновлено 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 в качестве быстрого и простого примера получения угла от точки