圆环图与刻度标记线（D3）

Question

我有三个圆环图

VAR数据= [ { 机构：[53245，28479，19697，24037，40245] }， { 机构：[ 45，9，127，37，11]} ， { 机构：[3245，88479，45697，1037，77245] } ]

var width = 100, 
    height = 100, 
    radius = Math.min(width, height)/2; 

var color = d3.scale.category20(); 

for (index = 0; index < data.length; ++index) { 

    var pie = d3.layout.pie() 
     .sort(null); 

    var arc = d3.svg.arc() 
     .innerRadius(radius - 30) 
     .outerRadius(radius - 5); 

    var svg = d3.select("body").append("svg:svg") 
     .attr("width", width) 
     .attr("height", height) 
     .append("g") 
     .attr("transform", "translate(" + width/2 + "," + height/2 + ")"); 

    var path = svg.selectAll("path") 
    .data(pie(data[index].institution)) 
    .enter().append("path") 
    .attr("fill", function(d, i) { return color(i); }) 
    .attr("d", arc); 
} 

对于每一个图表，我需要一个短线和标签与值每个段，例如这里

对此有任何简单的解决方案？

Answer 1

Here我的解决方案：

var data = [ 
    { 
     institution: [53245, 28479, 19697, 24037, 40245] 
    }, 
    { 
     institution: [45, 9, 127, 37, 11] 
    }, 
    { 
     institution: [3245, 88479, 45697, 1037, 77245] 
    } 
]; 

var width = 200; 
var height = 200; 
var radius = Math.min(width, height)/4; 
var r = radius; 
var textOffset=5; 

var colours = ['#ffc400','#e53517','#7ab51d','#009fda','#c2c2c2']; 

for (index = 0; index < data.length; ++index) { 
    var pie = d3.layout.pie().sort(null); 

    var arc = d3.svg.arc().innerRadius(radius - 30).outerRadius(radius - 5); 

    var svg = d3.select("body").append("svg:svg") 
    .attr("width", width) 
    .attr("height", height) 
    .append("g") 
    .attr("transform", "translate(" + width/2 + "," + height/2 + ")"); 

    var piedata=pie(data[index].institution); 

    var ticks = svg.selectAll("line").data(piedata).enter().append("line"); 
    ticks.attr("x1", 0) 
    .attr("x2", 0) 
    .attr("y1", -radius+4) 
    .attr("y2", -radius-2) 
    .attr("stroke", "gray") 
    .attr("transform", function(d) { 
     return "rotate(" + (d.startAngle+d.endAngle)/2 * (180/Math.PI) + ")"; 
    }); 

    var labels = svg.selectAll("text").data(piedata).enter().append("text"); 
    labels.attr("class", "value") 
    .attr("transform", function(d) { 
     var dist=radius+15; 
     var winkel=(d.startAngle+d.endAngle)/2; 
     var x=dist*Math.sin(winkel); 
     var y=-dist*Math.cos(winkel); 
     return "translate(" + x + "," + y + ")"; 
    }) 
    .attr("dy", "0.35em") 
    .attr("text-anchor", "middle") 
    .text(function(d){ 
     return d.value; 
    }); 

    var path = svg.selectAll("path") 
     .data(piedata) 
      .enter().append("path") 
     .attr("fill", function(d, i) { return colours[i]; }) 
     .attr("d", arc); 
}