프로젝트 7일: graphviz 노드에 웹 링크 걸기

나는 30일간의 안식휴가 중이다. 휴가 동안 개인 개발 프로젝트를 진행하고 있다.

원래는 어제 해결하려다, 다른 주제 D3.js에 마음을 빼앗겨 해결하지 못했던 문제로 돌아왔다.

graphviz의 노드에 웹 링크(href)를 걸기

찾아보니 싱겁게도, 설명서의 각종 속성을 지정하는 부분에 너무도 간단히, 그것도 아주 뻔한 href라는 속성으로 지정할 수 있다고 쓰여있었다. 지정할 수 있는 속성이 너무 많아서 일일이 살펴보기 어렵다는 점이 있다고 핑계를 대고 싶지만, 아, 너무도 뻔한 속성값이다.

어쨌든, 한번 연습 삼아서 링크를 걸어서 graphviz로 svg 그래프 하나 그려보는 걸로 일단락하기로 한다. 주제는, 오늘까지 7일간 살펴본 기술들의 의존성 그래프 그리기다.

day-07.dot

digraph G {
  rankdir="LR";
  splines="curved";
  node [style=filled, fillcolor=steelblue, fontsize=9, fontcolor=white];
  edge [arrowsize=0.7];

  시작 [fillcolor=deepskyblue, shape="rect", style="filled, rounded"];
  d1 [href="/holiday-project-day-01/", label="D1\nkarma&jasmine"];
  d2 [href="/holiday-project-day-02/", label="D2\njasmine-node"];
  d3 [href="/holiday-project-day-03/", label="D3\nsupertest"];
  d4 [href="/holiday-project-day-04/", label="D4\nbower"];
  d5 [href="/holiday-project-day-05/", label="D5\nhighlight.js"];
  d6 [href="/holiday-project-day-06/", label="D6\ngraghviz\nD3.js"];
  d7 [href="/holiday-project-day-07/", label="D7\ngraphviz\n웹링크"];

  시작 -> d1 -> d2 -> d3;
  시작 -> d4 -> d5;
  d1 -> d5;
  d4 -> d6 -> d7;
}

역시 dot 명령어로 SVG 파일을 만들고,

dot -Tsvg < day-07.dot > day-07.svg

결과 SVG의 모습은 아래와 같다.

day-07.svg

G <!– 시작 –> 시작 시작 <!– d1 –> d1 D1 karma&jasmine <!– 시작->d1 –> 시작->d1 <!– d4 –> d4 D4 bower <!– 시작->d4 –> 시작->d4 <!– d2 –> d2 D2 jasmine-node <!– d1->d2 –> d1->d2 <!– d5 –> d5 D5 highlight.js <!– d1->d5 –> d1->d5 <!– d3 –> d3 D3 supertest <!– d2->d3 –> d2->d3 <!– d4->d5 –> d4->d5 <!– d6 –> d6 D6 graghviz D3.js <!– d4->d6 –> d4->d6 <!– d7 –> d7 D7 graphviz 웹링크 <!– d6->d7 –> d6->d7

d[1-7] 노드에 마우스 포인터를 올려다 놓으면 알 수 있듯이, 웹 링크가 잘 걸려있다. 이런 방식으로 그래프 node, edge, label에 모두 href속성으로 아무런 문제 없이 링크를 걸 수 있으며, 결과 포맷이 svg 나 map일 때 해당 링크가 적용돼 출력된다.

D3.js가 훨씬 화려하기는 하지만, graphviz 역시 나름의 강점을 바탕으로 활용해볼 만한 여지가 크다. 게다가 graphviz로는 SVG뿐 아니라, png나 pdf 파일로도 만들기 편리하다는 점도 기억해 둘만 하다.

오늘은 여기까지.

30일 프로젝트 글목록