Setting direction of rotation in d3

Question

I have a circle with few clickable points. When I click one of these, I want it to rotate to the right side (zero degree) position. When I click the point on top (90deg), I want the circle to rotate clockwise and when I click the point at the bottom, (270deg), I want it to rotate anti-clockwise. Essentially, take the shortest path to get to right side. The problem is, when I click the bottom point (blue star), the circle takes the longest path to be at the right side. If you play around with it a bit more, you can see that it seems to set a specific direction to each point and no matter where they are, it follows that direction.

How do I control that direction of rotation please? Any pointers towards this is appreciated.

function rotate(angle) {
  d3.select('.container')
    .attr('transform', `rotate(${angle})`);
}

body {
  margin: 0 auto;
  text-align: center;
  padding: 10px;
}

.container {
  transform-origin: 250px 250px;
  transition: all 0.5s ease-in;
}

.star {
  cursor: pointer;
}

.star--red {
  fill: red;
}

.star--green {
  fill: green;
}

.star--blue {
  fill: lightblue;
}

.star--pink {
  fill: salmon;
}

^{Essentially I've copy pasted the codepen code here, but the pen is also available at https://codepen.io/anon/pen/LjMVzM}

Andrew · Accepted Answer

You can't just get away with tracking only the required rotation, you also need to keep track of the total rotation. For example, If you keep clicking whatever star is on top the required degrees to keep going becomes, [0, 90, 180, 270, 360, 450, ...]. Once keeping track of the total rotation, all you need to do is determine the direction to increment as shown below.

var totAngle = 0;
function rotate(angle) {
  d3.select('.container')
    .attr('transform', () => {
      // Clamp the current rotation to 0-360
      var minAngle = ((totAngle % 360) + 360) % 360;
      // Calculate the required rotation 0/90/180/270
      var rot = (angle - minAngle + 360) % 360;
      // Determine the direction clockwise/counter-clockwise
      totAngle += rot <= 180 ? rot : -90
      return `rotate(${totAngle})`;
    });
}

body {
  margin: 0 auto;
  text-align: center;
  padding: 10px;
}

.container {
  transform-origin: 250px 250px;
  transition: all 0.5s ease-in;
}

.star {
  cursor: pointer;
}

.star--red {
  fill: red;
}

.star--green {
  fill: green;
}

.star--blue {
  fill: lightblue;
}

.star--pink {
  fill: salmon;
}

Setting direction of rotation in d3

Answers (2)

Related Questions