disegnare testo in d3 arco javascript

Question

ho creato un arco con d3 sul http://jsfiddle.net/PRb93/1/

var vis = d3.select("body").append("svg") 
var pi = Math.PI; 

var arc = d3.svg.arc() 
    .innerRadius(300) 
    .outerRadius(320) 
    .startAngle(0 * (pi/180)) 
    .endAngle(-pi) 

vis.append("path") 
    .attr("d", arc) 
    .attr("transform", "translate(350,350)")​ 

Ora voglio richiamare testi in cima a questo arco (vi distribuiscono questo arco in n nodi). Non riesco ad usare il layout degli accordi direttamente perché non ho una matrice quadrata. Il mio tavolo è rettangolare e c'è un lhs e più di un rhs. Quindi prenderò un piccolo emisfero per un rh e un emisfero per lhs.

anche io sono perplesso su come disegnare le connessioni tra due nodi qui. non ricevendo alcun indizio

voglio ottenere qualcosa di simile a http://bost.ocks.org/mike/uberdata/:

Answer 1

Il trucco per posizionare il testo lungo una curva è quello di collegare un elemento di testo (e textPath) per SVG e dargli un xlink : attributo href che punta all'ID di un arco. Vedi sotto per un esempio.

var svg = d3.select("body").append("svg"), 
    pi = Math.PI; 

var arc = d3.svg.arc() 
    .innerRadius(150) 
    .outerRadius(180) 
    .startAngle(0) 
    .endAngle(-pi/2) 

var path = svg.append("path") 
    .attr("d", arc) 
    .attr("id", "path1") 
    .attr("transform", "translate(200,200)") 
    .attr("fill","#ccf") 

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

text.append("textPath") 
    .attr("stroke","black") 
    .attr("xlink:href","#path1") 
    .text("abc"); 

accordi vengono generati dai percorsi SVG, comprendenti ciascuno due archi e due curve di Bezier. Il layout Chord genererà questi per te se puoi fornirlo con l'input appropriato. Se si tengono separati i set di dati, potrebbe essere necessario creare manualmente ciascun percorso dell'accordo.

var svg = d3.select("body").append("svg") 
var pi = Math.PI; 

var arc = d3.svg.chord() 
    .source({startAngle:0.1,endAngle:0.2}) 
    .target({startAngle:0.6,endAngle:0.8}) 
    .radius(100) 

var path = svg.append("path") 
    .attr("d", arc) 
    .attr("id", "path1") 
    .attr("transform", "translate(200,200)") 
    .attr("fill","#ccf")​ 

Ho sentito quello che stai dicendo su due insiemi di dati rettangolare, ma è possibile che ci sia un modo per combinare i dataset in uno, e aggiungere zeri, se necessario, per renderlo quadrato. Il tuo compito sarà molto più semplice se puoi farlo, quindi vale la pena di investigare se non lo hai già fatto. Magari postarlo come una domanda?