url nhúng graphviz

Question

Tôi đang cố gắng tìm ra cách tạo biểu đồ có siêu liên kết mà bạn có thể nhấp để truy cập thông tin chi tiết hơn về từng nút/cạnh trong biểu đồ. Tôi thấy rằng graphviz có khả năng này bằng cách sử dụng thuộc tính nút URL. Sử dụng tập tin thử nghiệm của tôi ...

graph G { 
    node [label="\N"]; 
    graph [bb="0,0,218,108"]; 
    king [pos="31,90", width="0.86", height="0.50"]; 
    lord [pos="31,18", width="0.81", height="0.50"]; 
    "boot-master" [URL="google.com"]; 
    king -- lord [pos="31,72 31,61 31,47 31,36"]; 
} 

... Tôi đã có thể tạo ra một tập tin cmapx mà dường như có chứa một số thông tin hữu ích:

<map id="G" name="G"> 
<area shape="poly" href="google.com" title="boot&#45;master" alt="" coords="297,29 292,22 279,15 258,10 233,7 204,5 175,7 150,10 129,15 116,22 111,29 116,37 129,43 150,49 175,52 204,53 233,52 258,49 279,43 292,37"/> 
</map> 

Dưới đây là lệnh tôi sử dụng để tạo này:

dot -Tcmapx example1_graph.dot -o test.cmapx 

Tuy nhiên tôi không biết cách sử dụng tệp này? Các tài liệu cho graphviz cũng đề cập đến định dạng ps2 nên làm việc cho các liên kết URL nhưng tôi không có bất kỳ may mắn.

Answer 1

Bản đồ được tạo bởi graphviz thường có thể được sử dụng trong một trang HTML.

Ý tưởng là chạy graphviz hai lần: một lần để tạo bản đồ và một lần để tạo hình ảnh.

dot -Tcmapx example1_graph.dot -o test.cmapx 
dot -Tpng example1_graph.dot -o test.png 

Sau đó, hình ảnh được phân phát trong trang HTML cùng với bản đồ. Cú pháp sẽ giống như sau:

<img src="/test.png" usemap="#G" alt="graphviz graph" /> 
<!-- graphviz generated map --> 
<map id="G" name="G"> 
    <area shape="poly" href="google.com" title="boot&#45;master" alt="" coords="297,29 292,22 279,15 258,10 233,7 204,5 175,7 150,10 129,15 116,22 111,29 116,37 129,43 150,49 175,52 204,53 233,52 258,49 279,43 292,37"/> 
</map> 

Phần quan trọng là usemap="#G" liên kết hình ảnh với bản đồ.

Xem thêm this page để biết ví dụ về trang html phân phối hình ảnh và bản đồ với nhau.

---

Một định dạng tận dụng khác của Url là SVG:

dot -Tsvg example1_graph.dot -o test.svg 

Nếu bạn mở test.svg trong một trình duyệt, các nút có chứa URL đều có thể click.

(Btw, tùy thuộc vào việc sử dụng của bạn, bạn có thể muốn URL tiền tố có http://)