使用d3.js - 我想创建这种类型的时钟界面。
理想情况下,如果有一种方法可以将12小时钟表数据驱动方式融入到这个饼图中。
https://jsfiddle.net/qkHK6/2191/
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);
});