svg, d3, dagre, dagre-d3 và graphlib phụ thuộc vào nhau như thế nào?

Question

Tôi đã sử dụng dagre để vẽ đồ thị có hướng trực tiếp nhưng tôi đang cố gắng hiểu cách svg, d3, dagre và graphlib phụ thuộc lẫn nhau như thế nào? Về cơ bản, nơi dừng lại và người kia bắt đầu.

Tôi sẽ cố gắng và chỉ ra những gì tôi có thể thu thập với hiểu biết hạn chế của mình.

1. svg: (là một định dạng hình ảnh vector dựa trên XML, nhưng về cơ bản nó) là một thẻ html sử dụng mà bạn có thể vẽ hình tròn, hình elip, hình chữ nhật vv và sau đó sử dụng các yếu tố g vào nhóm hai hoặc nhiều hình dạng hơn và áp dụng biến đổi, v.v.

2. d3: d3 là thư viện javascript về cơ bản cho phép bạn kết hợp dữ liệu với svg. Vì vậy, thay vì viết thẻ svg mọi lúc, bạn về cơ bản sử dụng lập trình, vòng lặp, dữ liệu, vv và tạo mã svg.

   Bây giờ đến dagre, dagre-d3 và graphlib là nơi tôi có một vấn đề giả định rằng bất cứ điều gì tôi đã nói ở trên làm cho bất kỳ ý nghĩa :)

3. dagre, dagre-d3: Đây là những gì trang dagre nói "Dagre là một thư viện JavaScript giúp dễ dàng bố cục các đồ thị được hướng dẫn ở phía máy khách. Thư viện dagre-d3 hoạt động kết thúc với dagre, cung cấp hiển thị thực tế bằng D3."

   Có ai đó giải thích điều này cho tôi biết không? Vì vậy, tôi có thể sử dụng các chức năng d3 bên trong dagre, dagre-d3? Hmm..Tôi đã nhầm lẫn rồi, Bạn có thể giải thích với một ví dụ về cách tất cả những điều này cùng tồn tại không? này code snippet là những gì tôi đã suy nghĩ:

   var oldDrawNodes = renderer.drawNodes(); 
   renderer.drawNodes(function(graph, root) { 
       var svgNodes = oldDrawNodes(graph, root); 
       svgNodes.each(function(u) { 
       d3.select(this).classed(graph.node(u).nodeclass, true); 
       }); 
       return svgNodes; 
   }); 
   

   Ở đây, drawNodes là một hàm từ dagre-d3 nhưng nó đang được quá ridden và chúng tôi đang đi qua một chức năng d3 (d3.select (this) .classed) bên trong nó. Hừm ... chuyện đó xảy ra như thế nào? Tôi nghĩ rằng d3.select chỉ có thể được thực hiện cho các phần tử html? 'Cái này' ở đây là gì?

4. graphlib: Đây là trang graphlib và nó nói rằng nó cung cấp cấu trúc dữ liệu cho nhiều chữ. Nhưng ý tôi là, những thư viện này được xây dựng cho d3 hay dagre-d3?

Tôi biết tôi có vẻ bối rối nhưng bạn hiểu rồi! Nếu ai đó có thể giải thích cho tôi với một ví dụ về cách chúng có liên quan và những chức năng nào có thể được sử dụng bên trong những gì, tôi sẽ có thể nhận được.

Cảm ơn.

Answer 1

graphlib cung cấp cấu trúc dữ liệu biểu thị biểu đồ. Nó không làm bố cục hoặc hiển thị. Vì vậy, sau đây là graphlib tinh khiết:

var g = new Graph(); 
g.setNode(...); 
g.setEdge(...); 

dagre thực hiện bố cục (vị trí x và y) của các nút, trong đó các nút được biểu diễn bằng biểu đồ graphlib. Nó không làm rendering. Hầu hết thời gian bạn sẽ không gọi nó là chính mình, trừ khi bạn muốn làm hiển thị tùy chỉnh mà không có dagre-d3.

dagre-d3 sử dụng dagre cho bố cục và hiển thị nó bằng d3.Lưu ý rằng dagre-d3 bao gồm dagre và graphlib theo mặc định, là dagreD3.dagre và dagreD3.graphlib.

SVG là định dạng đầu ra cho d3. Nó là một định dạng đồ họa vector có mục đích chung, cũng có thể có nhúng HTML bình thường. Mỗi nút SVG cũng là một nút DOM. Đây là lý do tại sao d3.select cũng hoạt động trên các nút SVG.

Đoạn trích bạn đã đăng xuất hiện để thực hiện sau xử lý để đặt các lớp trên các nút. Ví dụ bạn đã liên kết với dường như đã được cập nhật kể từ đó và không bao gồm mã đó nữa.