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

问题描述

我正在寻找一个用于在鼠标按下事件时旋转饼图的示例。在鼠标按下，我需要旋转饼图顺时针或逆时针方向。

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.

如果有任何例子如何在D3.js这样做，这将帮助我很多。我发现了一个使用的示例，我想使用D3.js

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

推荐答案

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

工作。

这篇关于D3.JS - 在鼠标按下事件时旋转饼图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！