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点），我已经尝试过搜索时钟示例但是他们都是时钟表，而不仅仅是积分。

我希望它看起来非常像这样：

enter image description here

非常感谢任何帮助。

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饼图

2 个答案: