8

私はグーグルで調べてきましたが、これを理解できないようです。

私の状況では、円グラフに表示されたときに国が重なっています。

これは何が起こっているかの例です:

jsfiddle

ここに画像の説明を入力

私はまったくの初心者でD3、テキストの重複を防ごうとしています。ラベルが互いに重ならないように追加できるテキスト マージン属性のようなものはありますか?

4

2 に答える 2

12

更新:より包括的なソリューションに十分なスペースがある場合は、D3 put arc labels in a Pie Chartへの回答を参照してください。

テキスト要素が重ならないように配置する一般的な方法を知りません。

ただし、ラベルが重ならないようにラベルを回転させてグラフをスケーリングすることで、問題を回避できます: http://jsfiddle.net/2uT7F/

// Get the angle on the arc and then rotate by -90 degrees
var getAngle = function (d) {
    return (180 / Math.PI * (d.startAngle + d.endAngle) / 2 - 90);
};

g.append("text")
    .attr("transform", function(d) { 
            return "translate(" + pos.centroid(d) + ") " +
                    "rotate(" + getAngle(d) + ")"; }) 
    .attr("dy", 5) 
    .style("text-anchor", "start")
    .text(function(d) { return d.data.label; });
于 2013-01-26T20:02:23.387 に答える
3

もう 1 つの解決策は、米国が最初になるようにデータの順序を変更することです。パイ レイアウトの角度の方が読みやすいかもしれません。

var data_values = [48, 1, 1, 1, 1, 1, 1, 4];
var titles = ["USA","Pakistan", "Israel", "Netherlands", "Italy", "Uruguay",       "United Kingdom", "Austria", "China"]

http://jsfiddle.net/rocky1616/oLzsrd4o/

Musically_ut のソリューションは、ここでもうまく機能します。デザインで機能する場合は、角度を少し下げることもできます。

  var getAngle = function (d) {
      return (180 / Math.PI * (d.startAngle + d.endAngle) / 2 + 45);
  };

http://jsfiddle.net/2uT7F/26/

USA アイテムを処理するには、if else ブロックを作成する必要がありますが、それが役立つ場合はこれが始まりです。

于 2015-01-26T01:11:26.380 に答える