C3 - 如何在甜甜圈圖表中居中文本？

Question

我有C3圓環圖的一個問題 - 它不居中文本中的圖表： http://jsfiddle.net/aspirisen/q8h39/83/

c3.generate({ 
    legend: { 
    show: false, 
    position: 'right' 
    }, 
    data: { 
    columns: [ 
     ['data1', 50], 
     ['data2', 50], 
    ], 
    type: 'donut', 
    onclick: function (d, i) { console.log("onclick", d, i); }, 
    onmouseover: function (d, i) { console.log("onmouseover", d, i); }, 
    onmouseout: function (d, i) { console.log("onmouseout", d, i); } 
    }, 
    tooltip: { 
    show: false 
    }, 
    donut: { 
    width: 26, 
    label: { 
     format: function (value, ratio, id) { 
     return (ratio * 100).toFixed(0).toString() 
     } 
    } 
    } 
}); 

何解決這個問題？

謝謝！

Answer 1

RANT警告 - 這就是建立在d3頂部的「幫手」庫打擾了我這麼多。直接創建這個甜甜圈圖表d3是大約相同數量的代碼，你可以絕對控制這樣的事情。

無論如何，你可以C3已制定後重新計算質心解決這個問題，並重新定位文本（調整半徑[R移動標籤）：

// find all the labels 
d3.selectAll(".c3-chart-arc>text") 
    .attr("transform", function(d,i){ 
    var r = 30, //<-- adjust this to move the labels 
     a = (d.startAngle + d.endAngle)/2 - (Math.PI/2); 
    // compute the new centroid 
    return "translate(" + (Math.cos(a) * r) + "," + (Math.sin(a) * r) + ")"; 
}); 

---

全部代碼：

c3.generate({ 
 
    legend: { 
 
    show: false, 
 
    position: 'right' 
 
    }, 
 
    data: { 
 
    columns: [ 
 
     ['data1', 32], 
 
     ['data2', 50], 
 
    ], 
 
    type: 'donut', 
 
    onclick: function (d, i) { console.log("onclick", d, i); }, 
 
    onmouseover: function (d, i) { console.log("onmouseover", d, i); }, 
 
    onmouseout: function (d, i) { console.log("onmouseout", d, i); } 
 
    }, 
 
    tooltip: { 
 
    show: false 
 
    }, 
 
    donut: { 
 
    width: 26, 
 
    label: { 
 
     format: function (value, ratio, id) { 
 
     return (ratio * 100).toFixed(0).toString() 
 
     } 
 
    } 
 
    } 
 
}); 
 

 
setTimeout(function(){ 
 
d3.selectAll(".c3-chart-arc>text") 
 
\t .attr("transform", function(d,i){ 
 
    \t var r = 30, 
 
     a = (d.startAngle + d.endAngle)/2 - (Math.PI/2); 
 
    console.log("translate(" + (Math.cos(a) * r) + "," + (Math.sin(a) * r) + ")") 
 
    return "translate(" + (Math.cos(a) * r) + "," + (Math.sin(a) * r) + ")"; 
 
    }); 
 
}, 100);

#chart { 
 
    width: 100px; 
 
    height: 100px; 
 
}

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

Answer 2

你可以嘗試幾件事情。

1. 玩你的圖表大小和/或字體大小。我認爲這是迄今爲止最簡單的解決方案。

圖表已（通過setTimeout或類似的東西）被初始化後，手動定位的標籤。 （欲瞭解更多信息，請參閱this stackoverflow question。）要做到這一點，您需要選擇所有c3-chart-arc text元素，然後弄清楚如何放置它們。

下行：C3計算採用的圓弧形心的標籤位置，我不知道如果有，除非你事先就知道你的輸出將是什麼樣子（例如，僅2個弧這麼一個更好的定位方法比將左邊的文本放在左邊，右邊的文本放在右邊）。