svg - 円弧の外側のテキストの整列d3js

Question

d3jsを使用して下の画像を作成するのに助けてくれる人がいますか？必要に応じて円グラフを作成することができましたが、外側のテキストを矢印やすべてでレンダリングするために固執しました。私はコードの下に使用してサークルの作成を達成したノウハウのとおり

Wheel with outer text

。

var svg = d3.select("svg"); 
var margin = {top: 40, right: 45, bottom: 30, left: 40}; 
console.log(svg); 
var width = svg.attr('width'); 

var height = svg.attr('height'); 


var radius = Math.min(width, height)/2; 
var g = svg.append("g").attr("transform", "translate(" + width/2 + "," + height/2 + ")"); 
var hoverStyle = { 
    zindex: '2px' 
}; 

var hoverExitStyle = { 
    zindex: "0px" 
} 

var animateSpeed = 500; 

// Define a Pie 
var pie = d3.pie() 
    .sort(null) 
    .value(function(d) {return d.number}); 

// define pie section 
var path = d3.arc() 
    .outerRadius(radius - 10) 
    .innerRadius(0); 

// 
var label = d3.arc() 
    .outerRadius(radius - 40) 
    .innerRadius(radius - 40); 

// Get pie sections based on the data. 
var pieSections = pie(data); 

var arc = g.selectAll('.arc') 
    .data(pieSections) 
    .enter().append("g") 
    .attr("class", "arc") 
    .append('a') 
    .attr("href", function(d) { return d.data.url; }); 

arc.append("path") 
    .attr("d", path).transition() 
    .attr("fill", function(d) { return d.data.color; }); 

arc.append("text") 
    .attr("transform", function(d) { return "translate(" + label.centroid(d) + ")"; }) 
    .attr("dy", "0.35em") 
    .text(function(d) { return d.data.title; }); 

Answer 1

テキストと矢印は、おそらくそれぞれ独自の質問に値する2つの別々の懸念事項です。

はD3とのパス上のテキストを行うように湾曲したテキスト、あなたはtextpathドキュメントを見たいかもしれません。それはややこしいでしょう。基本的には、少し外側の半径を持つジェネレータd3.arc()ジェネレータを作成したいと思うでしょう。 SVGのdefsオブジェクトの中にpath要素（作成する必要がある）のd属性を設定し、path要素のidをtextpath要素（作成する必要があります）から参照してください。まさに画像のように、これを達成するために

曲線の矢印 、あなたはおそらく（数学を考え出す含む！）いくつかの手動構築する必要があるとしているdの適切な矢印を追加するには、自分の属性（SVGパスを参照してくださいsyntax）。静的なイメージを作成している場合は、線を作成して（より長い半径のd3.arc()ジェネレータを使用して）、より速く、SVG crowbarなどのSVGをIllustratorやInkscapeなどの描画プログラムにエクスポートし、そこに矢頭。