d3.js Albero rientrato con collegamenti diritti

Question

Il mio codice è basato su D3.js Indented tree example.

Desidero collegamenti diretti anziché i collegamenti curvi tra oggetti padre/figlio.

Capisco che questo abbia qualcosa a che fare con il seguente codice, tuttavia, non riesco a trovare una soluzione. Voglio che i collegamenti siano dritti con una svolta di 90 gradi.

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

Answer 1

Il problema è estrarre i punti x e y dai collegamenti. Un modo per farlo è: generatore

Link:

self.diagonal = d3.svg.line().interpolate('step') 
     .x(function (d) { return d.x; }) 
     .y(function (d) { return d.y; }); 

e quindi utilizzare il generatore in questo modo:

link.enter().append('svg:path', 'g') 
     .duration(self.duration) 
     .attr('d', function (d) { 
      return self.diagonal([{ 
       y: d.source.x, 
       x: d.source.y 
      }, { 
       y: d.target.x, 
       x: d.target.y 
      }]); 
     }); 

Answer 2

Sei quasi arrivato. È necessario utilizzare una linea normale con un'interpolazione adatta, ad es.

var line = d3.svg.line().interpolation("step") 
       .x(function(d) { return d.y; }) 
       .y(function(d) { return d.x; }); 

Potrebbe essere necessario modificare la modalità di interpolazione esatta.