d3コード：円の中央のテキスト

Question

私はのd3コード図の例を使用し、すべてのテキストラベルを曲線スライスの中央に配置したいとします。私は多くのことを試みましたが、テキストを中央に置くことはできませんでした。ウィザザードのトリックが必要だと分かっていますか？

var width = 720, 
height = 720, 
outerRadius = Math.min(width, height)/2 - 10, 
innerRadius = outerRadius - 24; 

var formatPercent = d3.format(".1%"); 

var arc = d3.svg.arc() 
.innerRadius(innerRadius) 
.outerRadius(outerRadius); 

var layout = d3.layout.chord() 
.padding(.04) 
.sortSubgroups(d3.descending) 
.sortChords(d3.ascending); 

var path = d3.svg.chord() 
.radius(innerRadius); 

var svg = d3.select("body").append("svg") 
.attr("width", width) 
.attr("height", height) 
.append("g") 
.attr("id", "circle") 
.attr("transform", "translate(" + width/2 + "," + height/2 + ")"); 

svg.append("circle") 
.attr("r", outerRadius); 

d3.csv("ex_csv.csv", function(cities) { 
d3.json("ex_json.json", function(matrix) { 

// Compute the chord layout. 
layout.matrix(matrix); 

// Add a group per neighborhood. 
var group = svg.selectAll(".group") 
.data(layout.groups) 
.enter().append("g") 
.attr("class", "group") 
.on("mouseover", mouseover); 


// Add the group arc. 
var groupPath = group.append("path") 
.attr("id", function(d, i) { return "group" + i; }) 
.attr("d", arc) 
.style("fill", function(d, i) { return cities[i].color; }); 

// Add a text label. 
var groupText = group.append("text") 
.attr("x", 6) 
.attr("dy", 15); 

groupText.append("textPath") 
.attr("xlink:href", function(d, i) { return "#group" + i; }) 
.text(function(d, i) { return cities[i].name; }); 

// Remove the labels that don't fit. :(
groupText.filter(function(d, i) { return groupPath[0][i].getTotalLength()/2 - 16 < this.getComputedTextLength(); }) 
.remove(); 

// Add the chords. 
var chord = svg.selectAll(".chord") 
.data(layout.chords) 
.enter().append("path") 
.attr("class", "chord") 
.style("fill", function(d) { return cities[d.source.index].color; }) 
.attr("d", path); 


} 
}); 
}); 

</script> 

Answer 1

さておき、私はV4へのアップグレードを探していることをお勧めとしては、v2のドキュメントはほとんど存在しないで、と助けて非常に困難です。

text-anchorとstartOffsetの両方のプロパティを設定して、探しているものを達成できます。

最初にtext-anchorをmiddleに設定すると、中点を特定するよりも中点を指定するほうが簡単で、中点を見つけてテキストをどこから開始するのかを簡単に見つけることができます。

次に、startOffsetを設定する必要があります。 50％を使用すると、テキストパスの合計の長さが追加する閉ループ（コードアンカー）のすべての辺であるため、テキストは必要な場所に表示されません。あなたが異なる外側と内側の半径を持っていない場合、それを25％に設定するとうまくいくでしょう。

groupText.append("textPath") 
.attr("xlink:href", function(d, i) { return "#group" + i; }) 
.text(function(d, i) { return cities[i].name; }) 
.attr("startOffset",function(d,i) { return (groupPath[0][i].getTotalLength() - 48)/4 }) 
.style("text-anchor","middle"); 

私はので、48を引く：あなたは、内側半径よりも24個のピクセル大きい外径を持っているようしかし、あなたは、テキストの中心をオフセットする必要があるピクセルの数を計算するために、このような何かを試すことができますアンカーの辺はそれぞれ24ピクセル（半径の差）です。私は4つに分けています。その経路が元に戻ります。それが一般的な行だったなら、私は2つだけで分けるだろう。

このアプローチは、外周が各コードアンカーの内周と同じではないため、やや単純ですが、私は少し離れていますが、実行可能でなければなりません。

表示されているカスプのラベルの場合は、内側の半径が短くなるため、文字列が表示されるのに十分短い場合に決定する式が間違っている可能性があります。アンカーの側面を登ってください（あなたの例でも、テキストが24よりむしろ長すぎるかどうかを計算するために半径の差として16ピクセルです）。

これは、最終的な結果である：

Hereはデモンストレーションです。