D3 cây dọc tách

Question

Tôi đang sử dụng bố cục cây D3, chẳng hạn như bố cục này: http://mbostock.github.com/d3/talk/20111018/tree.html

Tôi đã sửa đổi nó cho các nhu cầu của mình và đang gặp sự cố. Ví dụ có cùng một vấn đề quá, nếu bạn có quá nhiều nút mở thì chúng trở nên nhỏ gọn và làm cho việc đọc và tương tác trở nên khó khăn. Tôi muốn xác định một không gian dọc tối thiểu giữa các nút trong khi giai đoạn định cỡ lại để cho phép khoảng cách như vậy.

tôi đã cố gắng thay đổi thuật toán tách để làm cho nó làm việc:

.separation(function (a, b) { 
    return (a.parent == b.parent ? 1 : 2)/a.depth; 
}) 

Đó không làm việc. Tôi cũng đã thử tính toán chiều sâu nào có nhiều con nhất sau đó nói chiều cao của sân khấu là children * spaceBetweenNodes. Điều đó khiến tôi gần gũi hơn, nhưng vẫn không chính xác.

depthCounts = []; 
nodes.forEach(function(d, i) { 
    d.y = d.depth * 180; 

    if(!depthCounts[d.depth]) 
     depthCounts[d.depth] = 0; 

    if(d.children) 
    { 
     depthCounts[d.depth] += d.children.length; 
    } 
}); 

tree_resize(largest_depth(depthCounts) * spaceBetweenNodes); 

Tôi cũng đã cố gắng để thay đổi giá trị của nút x quá trong phương pháp dưới đây, nơi nó tính toán tách y, nhưng không có điếu xì gà. Tôi cũng sẽ đăng thay đổi đó nhưng tôi đã xóa nó khỏi mã của mình.

nodes.forEach(function(d, i) { 
    d.y = d.depth * 180; 
}); 

Nếu bạn có thể đề xuất một cách hoặc biết cách tôi có thể thực hiện khoảng cách tối thiểu theo chiều dọc giữa các nút, hãy đăng. Tôi sẽ rất biết ơn. Tôi có thể thiếu một cái gì đó rất đơn giản.

Answer 1

Tính đến năm 2016, tôi đã có thể đạt được điều này chỉ sử dụng

tree.nodeSize([height, width]) 

https://github.com/mbostock/d3/wiki/Tree-Layout#nodeSize

Các tham chiếu API là một chút nghèo, nhưng là tác phẩm khá thẳng về phía trước. Hãy chắc chắn sử dụng nó sau tree.size([height, width]) nếu không bạn sẽ ghi đè lại các giá trị của mình.

Để tham khảo hơn: D3 Tree Layout Separation Between Nodes using NodeSize

Answer 2

Tôi có thể tìm ra điều này với sự trợ giúp của người dùng trên Google Groups. Tôi không thể tìm thấy bài đăng. Giải pháp này yêu cầu bạn phải sửa đổi D3.js ở một chỗ, điều này không được khuyến khích nhưng nó là vấn đề duy nhất để giải quyết vấn đề này mà tôi có thể tìm thấy.

Bắt đầu từ khoảng dòng 5724 hoặc phương pháp này: d3_layout_treeVisitAfter

thay đổi:

d3_layout_treeVisitAfter(root, function(node) { 
    node.x = (node.x - x0)/(x1 - x0) * size[0]; 
    node.y = node.depth/y1 * size[1]; 
    delete node._tree; 
}); 

tới:

d3_layout_treeVisitAfter(root, function(node) { 
    // make sure size is null, we will make it null when we create the tree 
    if(size === undefined || size == null) 
    { 
     node.x = (node.x - x0) * elementsize[0]; 
     node.y = node.depth * elementsize[1]; 
    } 
    else 
    { 
     node.x = (node.x - x0)/(x1 - x0) * size[0]; 
     node.y = node.depth/y1 * size[1]; 
    } 
    delete node._tree; 
}); 

Dưới đây thêm một biến mới gọi là: elementsize và mặc định nó đến [ 1, 1 ] đến dòng 5731

var hierarchy = d3.layout.hierarchy().sort(null).value(null) 
    , separation = d3_layout_treeSeparation 
    , elementsize = [ 1, 1 ] // Right here 
    , size = [ 1, 1 ]; 

Dưới đây là một phương pháp được gọi là tree.size = function(x). Thêm dòng sau dưới đây định nghĩa rằng:

tree.elementsize = function(x) { 
    if (!arguments.length) return elementsize; 
    elementsize = x; 
    return tree; 
}; 

Cuối cùng khi bạn tạo cây bạn có thể thay đổi elementsize như vậy

var tree = d3.layout.tree() 
      .size(null) 
      .elementsize(50, 240); 

Answer 3

Việc sửa chữa ban đầu bạn đề nghị sẽ làm việc, bạn chỉ cần phải chắc chắn rằng bạn làm sau khi bạn thêm mọi thứ vào canvas. d3 tính toán lại bố trí mỗi khi bạn nhập, thoát, nối thêm, vv Sau khi bạn đã thực hiện tất cả những điều đó, sau đó bạn có thể fiddle với d.y để sửa chiều sâu.

nodes.forEach(function(d) { d.y = d.depth * fixdepth}); 

Answer 4

Tôi biết tôi không được phép trả lời các câu trả lời khác, nhưng tôi không có đủ danh tiếng để thêm nhận xét.

Dù sao, tôi chỉ muốn cập nhật điều này cho những người đang sử dụng tệp d3.v3.js mới nhất. (Tôi cho rằng điều này là do một phiên bản mới, vì dòng tham chiếu trong câu trả lời được chấp nhận là sai đối với tôi.)

Chức năng d3.layout.tree mà bạn đang chỉnh sửa được tìm thấy giữa các dòng 6236 và 6345. d3_layout_treeVisitSau khi bắt đầu trên dòng 6318. Biến phân cấp được khai báo trên dòng 6237. Các bit về tree.elementsize vẫn là viết tắt - Tôi đặt nó trên dòng 6343.

Cuối cùng (tôi giả định đây là lỗi): khi bạn tạo cây, hãy đặt các kích thước bên trong dấu ngoặc vuông, như bạn thường làm với "kích thước". Vì vậy:

var tree = d3.layout.tree() 
     .size(null) 
     .elementsize([50, 240]);