Javascript d3.js饼图时钟

使用d3.js-我想创建这种时钟接口

理想情况下，如果有一种方法将12个时钟的数据驱动方式合并到这个饼图中

---

我认为这个案子没有灵丹妙药。但是，你可以通过一些数学来实现这个目标

jsfiddle在前面

滴答声 刻度可以基于图形绘制。如果你害怕大量的公式，只要看看并使用它们就行了。他非常巧妙地将其描述为伪代码（我猜）

---

让它在某个时刻也能响应，这是一个简单的时钟面我如何添加刻度，以及下面显示时间范围的饼图范围？饼图范围在时钟面上的确切含义是什么？我认为这一部分从上午9点开始，然后在下午6点结束。这真是太棒了。我对它进行了调整，使它看起来更像他们的设计我不知道他们是否会预期这是一个真正的时钟，但我认为这是一个开始。有没有办法将时钟锁定到开始时间？@TheOldCounty您不想让时钟设置动画？@TheOldCounty如果它是正确的，您只需关闭

setInterval

功能，将

startAngle

和

endAngle

的

minuteArc

和

hourArc

更改为您想要的值。嗯，不太确定-正在寻找选项-什么是开始时间和结束时间-如果开始时间是9:20呢-我在时间中添加了一个分数元素-所以你可以添加一个时间，使其为1/2小时。

var w = 400;
var h = 400;
var r = h / 2;
var color = d3.scale.category20c();

var data = [{
  "label": "Category B",
  "value": 70
}, {
  "label": "Category A",
  "value": 30
}];


var vis = d3.select('#chart').append("svg:svg").data([data]).attr("width", w).attr("height", h).append("svg:g").attr("transform", "translate(" + r + "," + r + ")");
var pie = d3.layout.pie().value(function(d) {
  return d.value;
});

// declare an arc generator function
var arc = d3.svg.arc().outerRadius(r);

// select paths, use arc generator to draw
var arcs = vis.selectAll("g.slice").data(pie).enter().append("svg:g").attr("class", "slice");
arcs.append("svg:path")
  .attr("fill", function(d, i) {
    return color(i);
  })
  .attr("d", function(d) {
    // log the result of the arc generator to show how cool it is :)
    console.log(arc(d));
    return arc(d);
  });

var radius = 80;
var tickLength = 10;
var circleDegree = 360;

clockGroup.append('g')
  .attr('class', 'ticks')
  .selectAll('path')
  .data(splitDegrees(12))
  .enter()
  .append('path')
  .attr('d', function(d) {
    var coord = {
      outer: getCoordFromCircle(d, 0, 0, radius),
      inner: getCoordFromCircle(d, 0, 0, radius - tickLength)
    };
    return 'M' + coord.outer[0] + ' ' + coord.outer[1] + 'L' + coord.inner[0] + ' ' + coord.inner[1] + 'Z';
  });

function degToRad(degrees) {
  return degrees * Math.PI / 180;
}

// it'll give you xy-coord by degree from 12(or 0) o'clock 
function getCoordFromCircle(deg, cx, cy, r) {
  var rad = degToRad(deg);
  var x = cx + r * Math.cos(rad);
  var y = cy + r * Math.sin(rad);
  return [x, y];
}

function splitDegrees(num) {
  var angle = circleDegree / num;
  var degrees = [];

  for (var ang = 0; ang < circleDegree; ang += angle) {
    degrees.push(ang);
  }

  return degrees;
}

var fromClock = 9;
var toClock = 6;

var arc = d3.svg.arc()
  .innerRadius(0)
  .outerRadius(radius)
  .startAngle(clockToRad(fromClock, -1))
  .endAngle(clockToRad(toClock, 1));

clockGroup.append('path')
  .attr('d', arc)
  .style('fill', 'orange');

function clockToRad(clock, direction) {
  var unit = circleDegree / 12;
  var degree = direction > 0 ? unit * clock : unit * clock - circleDegree;
  return degToRad(degree);
}