向d3饼图添加时钟点

Question

我是 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 chart

但我正在努力向其添加 4 个时钟点及其时间表（上午 12 点、下午 3 点、下午 6 点、晚上 9 点），我尝试搜索时钟示例，但它们都是工作时钟，而不仅仅是点.

我希望它看起来像这样：

如有任何帮助，我们将不胜感激。

Answer 1

我不知道它在美学上有多正确，但就是这样。您可以做的是在图表中的这些位置添加 4 条线段：

[w/2, 0],[w/2,h],[0,h/2],[w,h/2]

如果添加以下行，您可以实现：

   var x=d3.scale.linear().domain([0,outerRadius]).range([0,w])
   var y=d3.scale.linear().domain([0,outerRadius]).range([h,0])

   svg.append('line').attr("x1",x(outerRadius/2)).attr("y1",0).attr("x2",x(outerRadius/2)).attr("y2",20)
   svg.append('line').attr("x1",x(outerRadius/2)).attr("y1",y(outerRadius)).attr("x2",x(outerRadius/2)).attr("y2",y(outerRadius)-20)

   svg.append('line').attr("x1",0).attr("y1",y(outerRadius/2)).attr("x2",20).attr("y2",y(outerRadius/2))
   svg.append('line').attr("x1",x(outerRadius)).attr("y1",y(outerRadius/2)).attr("x2",x(outerRadius)-20).attr("y2",y(outerRadius/2))

请注意，您必须创建一个 css 条目，以便显示该行：

line{   
    display:block;
    stroke:black;
}

JSFiddle here

希望对您有所帮助

Answer 2

效仿可爱的例子here。

var radians = 0.0174532925;
var hourScale = d3.scale.linear()
    .range([0,330])
    .domain([0,11]);

var labelGroup = svg.append('g')
    .attr('transform','translate(' + (center + margin) + ',' + (center + margin) + ')');

labelGroup.selectAll('.hour-label')
    .data([12,3,6,9])
        .enter()
        .append('text')
        .attr('class', 'hour-label')
        .attr('text-anchor','middle')
        .style('font-size','16pt')
        .attr('x',function(d){                
            return outerRadius * Math.sin(hourScale(d)*radians);
        })
        .attr('y',function(d){
            return -outerRadius * Math.cos(hourScale(d)*radians);
        })
        .text(function(d){
            return d;
        });

已更新 fiddle。

向d3饼图添加时钟点

Adding clock points to d3 pie chart

javascript

charts

d3.js