động thay đổi kích thước bố trí cây d3 dựa trên số childNodes

Question

Từ ví dụ này http://mbostock.github.com/d3/talk/20111018/tree.html Tôi đã xây dựng một d3 tree layout nơi gốc là ở giữa (root.x0 = width/2) trong cửa sổ trình duyệt và các nút là theo hướng đi xuống thay vì phải đối mặt với rẽ phải.

Có thể tái kích thước cây, sao cho chiều rộng của cây phụ thuộc về số lượng nút của cây sao cho số nút ít hơn, sau đó chiều rộng ít hơn hoặc khác của các nút lớn hơn thì chiều rộng là lớn?

Tôi cũng cần biết cách d3 tree layout hiện đang tính thuộc tính "d.x"? Làm thế nào tôi có thể thao tác "d.x" thuộc tính để điều chỉnh khoảng cách giữa các nút của bố cục cây d3.

Answer 1

Vì vậy, khi bạn đặt "kích thước" của bố cục cây, tất cả những gì bạn đang làm là đặt giá trị bố cục cây sẽ nội suy các giá trị x và y thành. Vì vậy, không có lý do gì bạn không thể tính toán chiều rộng hoặc chiều cao bạn muốn và thay đổi nó trong bố trí trên mỗi cuộc gọi cập nhật.

tôi sao chép ví dụ bạn đã cung cấp cho một jsFiddle và thêm dòng sau vào chức năng cập nhật:

// compute the new height 
var levelWidth = [1]; 
var childCount = function(level, n) { 

    if(n.children && n.children.length > 0) { 
    if(levelWidth.length <= level + 1) levelWidth.push(0); 

    levelWidth[level+1] += n.children.length; 
    n.children.forEach(function(d) { 
     childCount(level + 1, d); 
    }); 
    } 
}; 
childCount(0, root); 
var newHeight = d3.max(levelWidth) * 20; // 20 pixels per line 
tree = tree.size([newHeight, w]); 

Lưu ý rằng đây là một tính khá thô và không chịu ảnh hưởng ở nơi trẻ em được WRT cha mẹ hoặc bất cứ điều gì - nhưng bạn có được ý tưởng.

Đối với thao tác các giá trị x của các nút, đơn giản nhất có thể đơn giản là sửa đổi các nút sau khi bố cục đã làm điều đó. Trong thực tế, bạn có thể thấy rằng đây đã được thực hiện trong ví dụ với các tọa độ y:

// Normalize for fixed-depth. 
nodes.forEach(function(d) { d.y = d.depth * 180; }); 

Ông thực hiện điều này để ngay cả khi trẻ em được ẩn một mức độ nhất định của các nút nằm ở vị trí tương đương y, nếu không nếu bạn sụp đổ tất cả các trẻ em các cấp còn lại sẽ kéo dài để mất toàn bộ chiều rộng (hãy thử bình luận rằng dòng ra và xem những gì sẽ xảy ra khi bạn chuyển đổi toàn bộ các cấp vô hình).

Để đi xuống trên, tôi nghĩ bạn có thể dễ dàng lật qua mọi nơi bạn thấy x và y (và x0 và y0). Đừng quên làm tương tự với phép chiếu chéo để đảm bảo các đường thẳng của bạn cũng bị lật.