d3.js Drzewo z nacięciem z prostymi linkami

Question

Mój kod jest oparty na D3.js Indented tree example.

Potrzebuję linków prostych zamiast zakrzywionych łączy między obiektami nadrzędnymi/potomnymi.

Rozumiem, że ma to coś wspólnego z następującym kodem, jednak nie mogę znaleźć rozwiązania. Chcę, żeby linki były proste z obrotem o 90 stopni.

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

Answer 1

Problem polega na wyodrębnieniu punktów x i y z linków. Jednym ze sposobów na to jest: generator

Link:

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

a następnie użyć generatora takiego:

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

Już prawie jesteś. Musisz użyć normalnej linii z odpowiednią interpolacją, np.

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

Być może trzeba będzie zmienić dokładny tryb interpolacji.