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