d3.js Cây thụt lề với các liên kết thẳng

Question

Mã của tôi dựa trên D3.js Indented tree example.

Tôi muốn liên kết thẳng thay vì liên kết cong giữa cha/con-đối tượng.

Tôi hiểu điều này có liên quan đến mã sau, tuy nhiên, tôi không thể tìm thấy giải pháp. Tôi muốn các liên kết được thẳng với một lượt 90 độ.

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

Answer 1

Vấn đề là trích xuất điểm x và y từ các liên kết. Một cách để làm điều này là:

Liên kết phát:

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

Và sau đó sử dụng máy phát điện như thế này:

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

Bạn sắp hoàn tất. Bạn cần sử dụng một dòng bình thường với nội suy phù hợp, ví dụ:

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

Bạn có thể phải tinh chỉnh chế độ nội suy chính xác.