D3.JS - 在鼠标按下事件时旋转饼图 [英] D3.JS - Rotate a pie chart on mouse down event

问题描述

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

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这样做，这将帮助我很多。我发现了一个使用 FusionChart 的示例，我想使用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 + ")");
  }

工作 example 。

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