How to rotate figure in D3?

Question

The task is to rotate figure with d3, PowerPoint-like way:

Got this example, trying to achieve the same behaviour. Can't understand, where the mistake is - figure is shaking, is not rotating the way it should.

  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 })`)

  }

Here's a JSFiddle and alternatively, a snippet 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>

Thanks in advance!

Answer 1

The problem is the container for the drag. The default container is this.parentNode, where this is the element which the drag is applied on. You apply a drag to a circle and its parent node is a g. In your drag event you rotate the parent. This matters because:

• The container sets the coordinate system for the drag event (see the docs here).
• By rotating the g, you alter the coordinate system during the drag.

What we really want is a fixed coordinate system to reference the drag event, the SVG itself would be fine, or a parent g - something that doesn't change its transform each drag. So, let's set the drag container to something like the parent of the rotating g. The parent of the rotating g is your svg with a static coordinate system, so lets try:

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

That seems to avoid the jitters and give us a smooth transition (updated fiddle)

Here's a simplified snippet to demonstrate with the same functionality:

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>

In the snippet I'm relying on this as a quick and easy example on getting the angle from the point