在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点），我尝试搜索时钟示例，但它们都是工作时钟，而不仅仅是点。

我希望它看起来像这样：

任何帮助将不胜感激。