8

を使用して D3 で円グラフを作成していd3.layout.pie()ます。黒い点がなくても、このように見えます (問題を説明するために、Photoshop に手動で配置しました)。表面の真ん中にあるこれらのドットの座標を計算して、そこにいくつかのツールチップを配置するにはどうすればよいのでしょうか。私は完成した解決策を求めているのではなく、それを行う方法の原則についてもっと求めています。ありがとう。

円グラフ

4

3 に答える 3

8

次の式を使用して、円周上の点を計算できます。

x = cx + r * cos(a)
y = cy + r * sin(a)

は円(cx, cy)の中心、rは半径、aは角度です。

これを機能させるには、チャートの円スライスに基づいて角度を計算する方法が必要です - 以下を参照してください。

パイ レイアウトの d3 ドキュメントによると、このpie関数はアークのリストを返すため、このデータを処理して各ポイントを計算できます。

パイ（値[、インデックス]）

指定された値の配列で円関数を評価します。オプションのインデックスを指定できます。これは、開始角度関数と終了角度関数に渡されます。戻り値はアーク記述子の配列です

  • value - value アクセサーによって返されるデータ値。
  • startAngle - ラジアン単位の円弧の開始角度。
  • endAngle - ラジアン単位の円弧の終了角度。
  • data - この円弧の元のデータム。

おそらく、各円弧に対して と の間の距離の半分を取り、そこに点を配置するendAngleことができます。startAngle

価値があるのは、pie.js各弧を計算するために使用されるコードです。

// Compute the arcs!
// They are stored in the original data's order.
var arcs = [];
index.forEach(function(i) {
  var d;
  arcs[i] = {
    data: data[i],
    value: d = values[i],
    startAngle: a,
    endAngle: a += d * k
  };
});
return arcs;

それは役に立ちますか？

于 2013-07-02T13:44:10.967 に答える