将时钟点添加到 d3 饼图答案

【问题标题】：Adding clock points to d3 pie chart将时钟点添加到 d3 饼图
【发布时间】：2015-02-04 14:29:29
【问题描述】：

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

我希望它看起来像这样：

任何帮助将不胜感激。

【问题讨论】：

标签： javascript d3.js charts

【解决方案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 条目，以便显示该行：

线{ 显示：块；中风：黑色； }

JSFiddle here

希望对你有帮助

【讨论】：

很高兴为您提供帮助。你能接受答案以便问题结束吗？谢谢:)

【解决方案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。

【讨论】：