D3.JS - Rotate a pie chart on mouse down event

Question

I am looking for an example for to rotate a pie chart on mouse down event. On mouse down, I need to rotate the pie chart either clock wise or anti clock wise direction.

If there is any example how to do this in D3.js, that will help me a lot. I found an example using FusionChart and I want to achieve the same using D3.js

Have you tried anything so far? If so, you might want to include some bits of code here to show where you got stuck. — fejese, Dec 28 '14 at 19:42

score 3 · Answer 1 · answered Dec 28 '14 at 21:32

3

Pretty easy with d3:

var svg = d3.select("body").append("svg")
  .attr("width", width)
  .attr("height", height)
  .append("g")
  .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

var g = svg.selectAll(".arc")
    .data(pie(data))
    .enter().append("g")
    .attr("class", "arc");

g.append("path")
    .attr("d", arc)
    .style("fill", function(d) {
      return color(d.data.age);
    });

var curAngle = 0;
var interval = null;

svg.on("mousedown", function(d) {
    interval = setInterval(goRotate,10);
});

svg.on("mouseup", function(d){
    clearInterval(interval);
})

function goRotate() {
    curAngle += 1;
    svg.attr("transform", "translate(" + width / 2 + "," + height / 2 + ") rotate(" + curAngle + "," + 0 + "," + 0 + ")");
  }

Working example.

answered Dec 28 '14 at 21:32

Mark

106,305
20
172
230

This is working as expected. But how can we achieve both clockwise and anti-clock wise. The current piece of code is doing clock wise when we do mouse down. After we do mouse down and if we move the mouse anti clock wise, the pie chart has to move in anti clock wise and if we move the mouse clock wise, the pie chart has to me clock wise – Premchand Peddakotla Dec 30 '14 at 02:35
@PremchandPeddakotla, here's an [update](http://plnkr.co/edit/CmSHEWt1vsUFrRDwuIDL?p=preview). This only works on the x position, move right, go clockwise, move leftgo counterclockwise. **To make it complete**, instead of basing it on X position only, calculate the angle between current and last position on the mouse move. – Mark Dec 30 '14 at 03:11
Mark - The mouse move is not as smooth as it has to be. Also, what I observed was, when I am moving the mouse in clock wise, sometimes the pie rotates in anti clock wise and I observed the same when I move the mouse in anti clock wsie – Premchand Peddakotla Dec 30 '14 at 08:44
Does anyone has an example to tie the rotation to the mouse wheel scroll event? I have been trying to do that but havn't been able to rotate the chart! – Akhilesh Aggarwal Apr 29 '15 at 10:16

score 1 · Answer 2 · answered Jul 10 '15 at 01:37

I did a similar thing with a compass instead of pie chart. You mainly need three methods - each bound to a different mouse event.

Bind this to the mousedown event on your compass circle:

function beginCompassRotate(el) {

    var rect = compassCircle[0][0].getBBox(); //compassCircle would be your piechart d3 object
    compassMoving = true;
    compassCenter = {
        x: (rect.width / 2),
        y: (rect.height / 2)
    }
}

Bind this to the mouse move on your canvas or whatever is holding your pie chart - you can bind it to the circle (your pie chart) but it makes the movement a little glitchy. Binding it to the circle's container keeps it smooth.

function rotateCompass() {
    if (compassMoving) {
        var mouse = d3.mouse(svg[0][0]);

        var p2 = {
            x: mouse[0],
            y: mouse[1]
        };

        var newAngle = getAngle(compassCenter, p2) + 90;
        //again this v is your pie chart instead of compass
        compass.attr("transform", "translate(90,90) rotate(" + newAngle + "," + 0 + "," + 0 + ")");
    }
}

Finally bind this to the mouseup on your canvas - again you can bind it to the circle but this way you can end the rotation without the mouse over the circle. If it is on the circle you will keep rotating the circle until you have a mouse up event over the circle.

function endCompassRotate(el) {
    compassMoving = false;
}

Here is a jsfiddle showing it working: http://jsfiddle.net/4oy2ggdt/

D3.JS - Rotate a pie chart on mouse down event

2 Answers2

Linked

Related