Hiệu ứng kính lúp cho lực lượng D3/GraphGL hướng trực quan hóa mạng?

Question

Có thể tạo hiệu ứng lộng lẫy hoạt hình trơn tru (tương tự như dock trên Mac OS X) khi di chuột qua các nút trong hiển thị đồ thị theo hướng lực sử dụng thư viện D3 hoặc GraphGL không?

Các nút sẽ cần phải mở rộng và thay thế những người khác xung quanh, đồng thời duy trì bố cục theo hướng lực lượng.

Nếu ai đó có thể fork this để chứng minh, điều đó thật tuyệt vời! Cảm ơn

lưu ý, đây là khác biệt so với một zoom đơn giản như trong this question

Answer 1

Great câu hỏi. Để trả lời, tôi đã triển khai D3 plugin cho fisheye distortion. Nó gần như dựa trên công việc trước đó trong Flare và Sigma.js, lần lượt dựa trên công việc của Sarkar và Brown, "Graphical Fisheye Views of Graphs", CHI'92.

Dưới đây là quick demo với tập dữ liệu Misérables. Xem mã nguồn. Tôi sẽ viết sau ngày hôm nay khi tôi có thời gian.

Lưu ý: điều này sử dụng bố cục lực tĩnh; bố cục được tính khi khởi động và không thay đổi. Tôi nghĩ rằng đây có lẽ là những gì bạn muốn kết hợp với méo mắt cá, nếu không thì sự biến dạng sẽ cạnh tranh với khả năng di chuyển các nút xung quanh động. Nhưng về mặt lý thuyết có thể kết hợp chúng, nếu đó là những gì bạn muốn.

Answer 2

css tinh khiết có thể làm điều này nếu bạn chấp nhận nó.

.app{ 
-webkit-transition-property:-webkit-transform; 
-moz-transition-property:-moz-transform; 
-transition-property:-transform; 
-webkit-transition-duration:.15s; 
-moz-transition-duration:.15s; 
-transition-duration:.15s; 
} 

.app:hover{ 
-webkit-transform:scaleX(1.2) scaleY(1.2); 
-moz-transform:scaleX(1.2) scaleY(1.2); 
-transform:scaleX(1.2) scaleY(1.2); 
} 

Nó được sử dụng trên trang chủ của tôi tuoxie.me

Answer 3

Nó muốn được tuyệt vời nếu bạn có thể làm điều này với CSS tinh khiết, nhưng tiếc là nó trông giống như các thuộc tính cho các yếu tố SVG khác nhau (ví dụ, hình tròn) không có thể truy cập qua CSS. Cụ thể là 'bán kính', nhưng tôi nghĩ điều này đúng cho toàn bộ các thuộc tính phần tử SVG.

Nhưng không quá khó để thực hiện thông qua d3. Đây là my example jsfiddle. Về cơ bản, bạn làm như sau:

1. Sử dụng chuyển tiếp (xem Tutorial #2 để tìm hiểu cách sử dụng các cài đặt này). Về cơ bản, hãy thực hiện d3element.transition().delay(300).attr(...) để thực hiện các thay đổi.
2. Để giữ cho vòng kết nối 'bị thổi lên' chồng lên nhau, tốt nhất tôi có thể tìm ra là sửa đổi cài đặt force layout's charge. Tăng lực đẩy khi vòng tròn lớn hơn.

Hy vọng rằng đó là những gì bạn đang tìm kiếm ...