d3円グラフにクロックポイントを追加する

私はD3に非常に慣れていません-実際、私は昨日始めたばかりです-ここにドーナツ円グラフがあります：

var dataset = new Array();

dataset[0] = {"value":"50","color":"red"};
dataset[1] = {"value":"20","color":"blue"};

var pie = d3.layout.pie().sort(null).value(function(d){return d.value;});

    var h = w = 500;
    var center = w / 2;
    var outerRadius = ((h/2)-5);
    var innerRadius = outerRadius-10;
    var arc = d3.svg.arc()
        .innerRadius(innerRadius)
        .outerRadius(outerRadius);

    var arcOutter = d3.svg.arc()
        .innerRadius(outerRadius)
        .outerRadius(outerRadius + 1);

    var arcInner = d3.svg.arc()
        .innerRadius(innerRadius)
        .outerRadius(innerRadius - 1);


    //Create SVG element
    var svg = d3.select("body")
        .append("svg")
        .attr("width", w)
        .attr("height", h);

    //Set up groups
    var arcs = svg.selectAll("g.arc")
        .data(pie(dataset))
        .enter()
        .append("g")
        .attr("class", "arc")
        .attr("transform", "translate(" + center + ", " + center + ")");


    //Set up outter arc groups
    var outterArcs = svg.selectAll("g.outter-arc")
        .data(pie(dataset))
        .enter()
        .append("g")
        .attr("class", "outter-arc")
        .attr("transform", "translate(" + center + ", " + center + ")");

    //Set up outter arc groups
    var innerArcs = svg.selectAll("g.inner-arc")
        .data(pie(dataset))
        .enter()
        .append("g")
        .attr("class", "inner-arc")
        .attr("transform", "translate(" + center + ", " + center + ")");


    //Draw arc paths
    arcs.append("path")
        .attr("fill", function (d, i) 
        {
        return d.data.color;
    }).attr("d", arc);

    //Draw outter arc paths
    outterArcs.append("path")
        .attr("fill", 'green')
        .attr("d", arcOutter).style('stroke', 'white')
        .style('stroke-width', 0);

    //Draw inner arc paths
    innerArcs.append("path")
        .attr("fill", 'green')
        .attr("d", arcInner).style('stroke', 'white')
        .style('stroke-width', 0);

jsFiddleチャート

しかし、4つの時計ポイントとそのタイムテーブル（午前12時、午後3時、午後6時、午後9時）を追加するのに苦労しています。時計の例を検索してみましたが、それらはすべて、ポイントだけでなく、動作中の時計です。

私はそれをこのようにかなり見せたいです：

どんな助けでも大歓迎です。