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

全フィドル：このようにする代わりに<line>のhttp://jsfiddle.net/zh3owyr3/

Answer 1

、追加<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"); 

そして、 ch tick機能での地位をアンジュ：http://jsfiddle.net/mjru5ta8/

PS：あなたがトリミングされている秒の円を避けるために、あなたのビューボックスを変更する必要があります

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

ここでは、あなたの更新フィドルです。