Question

我正在寻找一个在鼠标按下事件上旋转饼图的示例。在鼠标按下时，我需要以时钟方向或反时钟方向旋转饼图。

如果在D3.js中有任何示例如何执行此操作，这将对我有很大帮助。我找到了一个使用FusionChart的例子，我希望使用D3.js

实现相同的目标

Answer 1

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 + ")");
  }

工作example。

Answer 2

我用指南针而不是饼图做了类似的事情。您主要需要三种方法 - 每种方法都绑定到不同的鼠标事件。

将此绑定到罗盘圈上的mousedown事件：

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

将此绑定到画布上的鼠标移动或任何拿着饼图的东西 - 你可以将它绑定到圆圈（你的饼图），但它会使运动有点小问题。将它绑定到圆形容器可以保持光滑。

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 + ")");
    }
}

最后将它绑定到画布上的mouseup - 再次将它绑定到圆圈，但这样您就可以在没有鼠标悬停在圆圈上的情况下结束旋转。如果它在圆圈上，您将继续旋转圆圈，直到圆圈上有鼠标向上事件。

function endCompassRotate(el) {
    compassMoving = false;
}

这是一个显示正常工作的jsfiddle：http://jsfiddle.net/4oy2ggdt/

D3.JS - 在鼠标按下事件上旋转饼图

2 个答案: