Javascript d3.js径向时钟,添加点而不是时钟指针
我正在尝试制作一个径向时钟,但是我需要在每条路径的末端有点来指示时间,而不是时钟臂(蓝色)。谢谢你的帮助 编辑:像这样: 划线部分:Javascript d3.js径向时钟,添加点而不是时钟指针,javascript,d3.js,svg,Javascript,D3.js,Svg,我正在尝试制作一个径向时钟,但是我需要在每条路径的末端有点来指示时间,而不是时钟臂(蓝色)。谢谢你的帮助 编辑:像这样: 划线部分: var clockLine = linesLayer.selectAll('.clock-line') .data(fields); clockLine.enter().append('line') .attr('class', function (d) { return 'line clock-line ' + d.id; }) .attr('x1', 0)
var clockLine = linesLayer.selectAll('.clock-line')
.data(fields);
clockLine.enter().append('line')
.attr('class', function (d) { return 'line clock-line ' + d.id; })
.attr('x1', 0).attr('y1', 0);
全小提琴:代替
,附加
:
var clockCircle = linesLayer.selectAll('.clock-line')
.data(fields);
clockCircle.enter().append('circle')
.attr('class', function(d) {
return 'circle clock-circle ' + d.id;
})
.attr("r", 6)
.attr("fill", "teal");
并更改其在勾选功能中的位置:
clockCircle.attr('cx', function(d) {
return d.index * radius * Math.cos(d.value * 2 * Math.PI - Math.PI / 2);
})
.attr('cy', function(d) {
return d.index * radius * Math.sin(d.value * 2 * Math.PI - Math.PI / 2);
});
这是你最新的小提琴:
PS:您必须更改视图框,以避免剪切秒的圆。您所说的“每条路径末端的点指示时间(蓝色)”是什么意思?如小时指示器?如以下示例: