Ràng buộc d3.js Hiển thị lực

Question

Tôi muốn làm điều gì đó hơi khác thường với bố trí lực (để hiển thị đồ thị). Chòm sao và tất cả đều thú vị để xem xét, nhưng đối với dữ liệu thời gian, nó không phải là hữu ích. Tôi muốn có thể hạn chế bố trí của một số trục, ví dụ, bằng cách đặt ra các nút theo thời gian chúng xuất hiện trong tập dữ liệu, trong khi vẫn giữ lại "bouncyness" của trực quan hóa. Điều này có thể sử dụng d3?

Answer 1

Để xây dựng trên nhận xét của tôi, có, điều này là hoàn toàn có thể. Bố trí lực không thực sự định vị các nút, nó chỉ tính toán các vị trí. Trong trình xử lý sự kiện tick, bạn thường cung cấp chức năng quản lý vị trí. Ở đó, bạn có thể thêm các ràng buộc tùy ý hạn chế cách các nút có thể di chuyển.

Lấy một trong số stock examples, bạn có thể thực hiện những việc như sau để hạn chế tọa độ x trong phạm vi + -10 của vị trí dự định với y không bị giới hạn.

force.on("tick", function() { 
    node.each(function(d) { 
    var intended = scale(d.value); 
    d.x = d.px = Math.min(intended + 10, Math.max(intended - 10, d.px)); 
    }); 
    node.attr("cx", function(d) { return d.x; }) 
     .attr("cy", function(d) { return d.y; }); 
}); 

Đây là một khác example sử dụng bố cục lực để định vị nhãn. Ở đó, vị trí x bị bỏ qua (tức là hằng số) và chỉ có y bị ảnh hưởng bởi bố cục.

Answer 2

Webcola là một công cụ tuyệt vời để tạo bố cục dựa trên ràng buộc với D3.JS.

Xem https://github.com/tgdwyer/WebCola