narysować tekst w d3 łuku javascript

Question

Utworzono łuk d3 na 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)")​ 

Teraz chcę zwrócić teksty na górę łuku (będę rozpowszechniać ten łuk do n węzłów). Nie mogę użyć układu akordów bezpośrednio, ponieważ nie mam kwadratowej matrycy. Mój stół jest prostokątny i jest jeden lhs i więcej niż jeden rhs. Więc wezmę jedną małą półkulę na jedną dużą i jedną dużą półkulę dla lhs.

również jestem zaintrygowany, jak narysować połączenia między dwoma węzłami tutaj. Nie otrzymuję żadnych pojęcia

chcę osiągnąć coś podobnego http://bost.ocks.org/mike/uberdata/:

Answer 1

Trick do tekstu pozycjonowania wzdłuż krzywej jest załączyć tekst (i textPath) elementu do SVG i nadać mu XLink : atrybut href wskazujący identyfikator łuku. Zobacz poniżej przykład.

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"); 

akordów są generowane ze ścieżek wektorowym, z których każdy składa się z dwóch łuków i krzywymi beziera. Układ Chorda wygeneruje je dla ciebie, jeśli będziesz mógł podać mu odpowiednie dane wejściowe. Jeśli przechowujesz oddzielne zbiory danych, konieczne może być ręczne utworzenie każdej ścieżki akordów.

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")​ 

słyszę, co mówisz o dwóch zestawów danych prostokątnych, ale jest to możliwe, istnieje sposób, aby połączyć swoje zbiory danych do jednego, a w razie potrzeby dodać zer, aby to kwadrat. Twoje zadanie będzie znacznie prostsze, jeśli możesz to zrobić, więc warto trochę zbadać, jeśli jeszcze tego nie zrobiłeś. Może opublikuj to jako pytanie?