Come utilizzare la funzione diagonale D3 per tracciare linee curve?

Question

Ho guardato campione http://bl.ocks.org/mbostock/raw/4063570/:

Produce belle linee unite da bersaglio fonte da sinistra a destra.

Nel mio caso ho bisogno di layout dei nodi manualmente e di inserire le coordinate x, y. In questo caso le linee non vengono unite ai nodi di origine. Ecco il codice di prova che riproducono questo problema:

var data = [ {name: "p1", children: [{name: "c1"}, {name: "c2"}, {name: "c3"}, {name: "c4"}]}]; 
var width = 400, height = 200, radius = 10, gap = 50; 

// test layout 
var nodes = []; 
var links = []; 
data.forEach(function(d, i) { 
    d.x = width/4; 
    d.y = height/2; 
    nodes.push(d); 
    d.children.forEach(function(c, i) { 
     c.x = 3*width/4; 
     c.y = gap * (i +1) -2*radius; 
     nodes.push(c); 
     links.push({source: d, target: c}); 
    }) 
}) 

var color = d3.scale.category20(); 

var svg = d3.select("#chart").append("svg") 
     .attr("width", width) 
     .attr("height", height) 
     .append("g"); 
var diagonal = d3.svg.diagonal() 
     .projection(function(d) { return [d.x, d.y]; }); 

var link = svg.selectAll(".link") 
     .data(links) 
     .enter().append("path") 
     .attr("class", "link") 
     .attr("d", diagonal); 

var circle = svg.selectAll(".circle") 
     .data(nodes) 
     .enter() 
     .append("g") 
     .attr("class", "circle"); 

var el = circle.append("circle") 
     .attr("cx", function(d) {return d.x}) 
     .attr("cy", function(d) {return d.y}) 
     .attr("r", radius) 
     .style("fill", function(d) {return color(d.name)}) 
     .append("title").text(function(d) {return d.name}); 

C'è campione di questo in http://jsfiddle.net/zmagdum/qsEbd/:

Tuttavia, sembra che il comportamento delle curve vicino ai nodi sono opposti desiderato . Mi piacerebbe che iniziassero orizzontalmente ai nodi e formassero una curva nel mezzo. C'è un trucco per fare questo?

Answer 1

Si noti che nell'esempio di blocchi, i valori xey vengono scambiati nei collegamenti. Normalmente questo disegnerebbe i link nel posto sbagliato, ma ha anche fornito una funzione di proiezione che li scambia.

var diagonal = d3.svg.diagonal() 
    .projection(function(d) { return [d.y, d.x]; }); 

Ecco la tua jsfiddle con questa tecnica applicata: http://jsfiddle.net/bmdhacks/qsEbd/5/

Answer 2

Questa soluzione si basa sulla soluzione eccellente @bmdhacks, però, credo che la mia è leggermente migliore, dal momento che non richiede lo scambio x e y all'interno dei dati stessi.

L'idea è che si può utilizzare diagonal.source() e diagonal.target() per scambiare x e y:

var diagonal = d3.svg.diagonal() 
    .source(function(d) { return {"x":d.source.y, "y":d.source.x}; })    
    .target(function(d) { return {"x":d.target.y, "y":d.target.x}; }) 
    .projection(function(d) { return [d.y, d.x]; }); 

Tutti x y scambio è ora incapsulato all'interno del codice di cui sopra.

Il risultato:

Qui si trova anche jsfiddle.