javascript - d3.js 径向时钟，添加点而不是时钟指针

Question

我正在尝试制作一个径向时钟，但不是时钟臂，我需要在每条路径的末端都有点来指示时间(蓝色)。感谢您的帮助!

编辑:像这样:https://puu.sh/sH03Y/c59281fb5e.png

画线部分:

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

完整 fiddle :http://jsfiddle.net/zh3owyr3/

Answer 1

而不是 <line> , 附加一个 <circle> :

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

并改变它在tick中的位置功能:

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

这是您更新的 fiddle :http://jsfiddle.net/mjru5ta8/

PS:您必须更改您的 View 框以避免秒的圆圈被裁剪。