javascript - 带有标签和百分比的 d3 仪表图？

Question

我们正在搜索如下所示的径向图表。这个图表最有趣的是它有百分比。我们已经搜索了大约三天，但没有找到任何使用 d3.js 库的东西。

我们找到了这两张实心仪表图，一张来自 amcharts另一个来自 anycharts , 但都没有明确的百分比。 Highcharts也有类似的东西，但不是标签。另外，他们不使用 d3，也不开源。

感谢任何帮助。

谢谢。

Answer 1

它可以很容易地从头开始编码

可以使用centroid 函数获取段的结束或开始坐标，之后您可以在此处添加文本并相应地旋转它

var data = [45,33,66,50,90]

var svg = d3.select('#result').append('svg').attr('width',500).attr('height',500)



var arcs = data.map((v,i)=>{
    return d3.svg.arc().innerRadius(i*20+60).outerRadius((i+1)*20-5+60)
});


var pieData = data.map((v,i)=>{
   return [{value:v*0.75,arc:arcs[i]},{value:(100-v)*0.75,arc:arcs[i]},{value:100*0.25,arc:arcs[i]}]
})


var pie = d3.layout.pie()
    .sort(null)
    .value(d=>d.value)
    
    
  var g = svg.selectAll('g').data(pieData).enter().append('g').attr('transform','translate(250,250) rotate(180)').attr('fill-opacity',(d,i)=>2/(i+1))
 
 // progress
 g.selectAll('path').data(d=>{return pie(d)}).enter().append('path').attr('d',d=>{return d.data.arc(d)})
 .attr('fill',(d,i)=>i==0?'blue':'none')
 
svg.selectAll('g').each(function(d){
var el = d3.select(this);
  el.selectAll('path').each((r,i)=>{
    
    if(i==1){
    var centroid = r.data.arc.centroid({startAngle:r.startAngle+0.05,endAngle:r.startAngle+0.001+0.05})
    g.append('text').text(100-Math.floor(r.value)+'%').attr('transform',`translate(${centroid[0]},${centroid[1]}) rotate(${180/Math.PI*(r.startAngle)+7})`).attr('alignment-baseline','middle')
    }

  })
})
 

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id='result'></div>