gpt4 book ai didi

javascript - d3.js饼图时钟

转载 作者:行者123 更新时间:2023-12-03 23:46:29 25 4
gpt4 key购买 nike

使用 d3.js - 我想创建这种时钟界面。

理想情况下,如果有一种方法可以将 12 时钟数据驱动方式合并到该饼图中。

enter image description here

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

最佳答案

我认为这种情况没有 Elixir 。但是,您可以通过一些数学来实现这个目标。

jsfiddle 是 here提前。

滴答声

刻度可以根据trigonometric functions绘制.如果你害怕大量的公式,看看this并使用它们。他非常巧妙地将其描述为伪代码(我猜)。

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

弧度范围

在这种情况下,您可以通过简单的 d3 methods 来绘制它.

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

关于javascript - d3.js饼图时钟,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38155793/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com