帶標籤和百分比的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>

Answer 2

我公頃也需要這種類型的圖表。

我的代碼如下，根據父寬度作出響應圖。 爲它你需要得到父寬度和分配它var width變量

希望這段代碼可以幫助你。

var width = 300; 
 
       var arcSize = (6 * width/100); 
 
       var innerRadius = arcSize * 3;    
 

 
       var data = [ 
 
        {value: 45, label: "label_1", color: '#ff0000'}, 
 
        {value: 33, label: "label_2", color: '#00ff00'}, 
 
        {value: 66, label: "label_3", color: '#0000ff'}, 
 
        {value: 50, label: "label_4", color: '#ffff00'}, 
 
        {value: 90, label: "label_5", color: '#ff0099'} 
 
       ]; 
 
    
 
       function render() { 
 
        var svg = d3.select('#result').append('svg').attr('width', width).attr('height', width); 
 

 
        var arcs = data.map(function (obj, i) { 
 
         return d3.svg.arc().innerRadius(i * arcSize + innerRadius).outerRadius((i + 1) * arcSize - (width/100) + innerRadius); 
 
        }); 
 
        var arcsGrey = data.map(function (obj, i) { 
 
         return d3.svg.arc().innerRadius(i * arcSize + (innerRadius + ((arcSize/2) - 2))).outerRadius((i + 1) * arcSize - ((arcSize/2)) + (innerRadius)); 
 
        }); 
 

 
        var pieData = data.map(function (obj, i) { 
 
         return [ 
 
          {value: obj.value * 0.75, arc: arcs[i], object: obj}, 
 
          {value: (100 - obj.value) * 0.75, arc: arcsGrey[i], object: obj}, 
 
          {value: 100 * 0.25, arc: arcs[i], object: obj}]; 
 
        }); 
 

 
        var pie = d3.layout.pie().sort(null).value(function (d) { 
 
         return d.value; 
 
        }); 
 

 
        var g = svg.selectAll('g').data(pieData).enter() 
 
         .append('g') 
 
         .attr('transform', 'translate(' + width/2 + ',' + width/2 + ') rotate(180)'); 
 
        var gText = svg.selectAll('g.textClass').data([{}]).enter() 
 
         .append('g') 
 
         .classed('textClass', true) 
 
         .attr('transform', 'translate(' + width/2 + ',' + width/2 + ') rotate(180)'); 
 

 

 
        g.selectAll('path').data(function (d) { 
 
         return pie(d); 
 
        }).enter().append('path') 
 
         .attr('id', function (d, i) { 
 
          if (i == 1) { 
 
           return "Text" + d.data.object.label 
 
          } 
 
         }) 
 
         .attr('d', function (d) { 
 
          return d.data.arc(d); 
 
         }).attr('fill', function (d, i) { 
 
         return i == 0 ? d.data.object.color : i == 1 ? '#D3D3D3' : 'none'; 
 
        }); 
 

 
        svg.selectAll('g').each(function (d, index) { 
 
         var el = d3.select(this); 
 
         var path = el.selectAll('path').each(function (r, i) { 
 
          if (i === 1) { 
 
           var centroid = r.data.arc.centroid({ 
 
            startAngle: r.startAngle + 0.05, 
 
            endAngle: r.startAngle + 0.001 + 0.05 
 
           }); 
 
           var lableObj = r.data.object; 
 
           g.append('text') 
 
            .attr('font-size', ((5 * width)/100)) 
 
            .attr('dominant-baseline', 'central') 
 
            /*.attr('transform', "translate(" + centroid[0] + "," + (centroid[1] + 10) + ") rotate(" + (180/Math.PI * r.startAngle + 7) + ")") 
 
            .attr('alignment-baseline', 'middle')*/ 
 
            .append("textPath") 
 
            .attr("textLength", function (d, i) { 
 
             return 0; 
 
            }) 
 
            .attr("xlink:href", "#Text" + r.data.object.label) 
 
            .attr("startOffset", '5') 
 
            .attr("dy", '-3em') 
 
            .text(lableObj.value + '%'); 
 
          } 
 
          if (i === 0) { 
 
           var centroidText = r.data.arc.centroid({ 
 
            startAngle: r.startAngle, 
 
            endAngle: r.startAngle 
 
           }); 
 
           var lableObj = r.data.object; 
 
           gText.append('text') 
 
            .attr('font-size', ((5 * width)/100)) 
 
            .text(lableObj.label) 
 
            .attr('transform', "translate(" + (centroidText[0] - ((1.5 * width)/100)) + "," + (centroidText[1] + ") rotate(" + (180) + ")")) 
 
            .attr('dominant-baseline', 'central'); 
 
          } 
 
         }); 
 
        }); 
 
       } 
 

 
      
 
       render()

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