D3.jsを使って単純な円グラフを描画します。ラベルも付けてみます。
元データ
元データです。
キーと値のハッシュになっています。
testdata = {
水分: 95.4,
タンパク質: 1.0,
脂質: 0.1,
炭水化物: 3.0,
灰分: 0.5
}
できあがりイメージ
グラフの右側にラベルを置き、円弧と線で結んでみました。
プログラム
プログラムの一部です。
線分は d3.lineRadical
でひきました。
lineRadicalに渡す値は、以下のように計算しました。
const calcLineRadical = d => {
const firstAngle = d.midAngle;
const firstRadius =
(d.xOrder * 30) / Math.abs(Math.cos(Math.PI - firstAngle));
const xpos = radius * 1.5 - d.centroidX;
const secondAngle =
Math.PI + Math.atan(xpos / (firstRadius * Math.cos(firstAngle)));
const secondRadius = Math.abs(xpos / Math.sin(secondAngle));
const fixedSecondAngle =
secondAngle < Math.PI ? secondAngle : secondAngle - Math.PI;
return [
[0, 0],
[firstAngle, firstRadius],
[fixedSecondAngle, secondRadius]
];
};
プログラム全体はObservableに置いています。