2013-07-31 3 views
2

이 다이어그램을 viz.js로 만들었습니다.D3.js에서 힘 지향 그래프로 다이어그램을 만드는 방법은 무엇입니까?

<script type="text/vnd.graphviz" id="myDiagram"> 
digraph G { 
graph [ 
    fontname = "Arial", 
    fontsize = 18, 
    label = "Digest Email Flow Chart", 
    size = "4,4" ]; 

node [ 
    shape = ellipse, 
    sides = 4, 
    distortion = "0.0", 
    orientation = "0.0", 
    skew = "0.0", 
    bgcolor = lightgray, 
    style = filled, 
    fontname = "Arial" ]; 

"Email Notification" [shape=ellipse, shape = "Mrecord" label="Digest Email\n(scheduled)"]; 
"Sentiment Analysis" [shape=ellipse, shape = "Mrecord" label="Sentiment Analysis\n(triggered)"]; 
"Google News"   [shape=ellipse, shape = "Mrecord" label="Google News\n(scheduled)"]; 
"Dilbert Daily Comics" [shape=ellipse, shape = "Mrecord" label="Dilbert Daily Comics\n(scheduled)"]; 
"Time Series Chart" [shape=ellipse, shape = "Mrecord" label="Time Series Chart\n(triggered)"]; 
"Twitter Stream"  [shape=ellipse, shape = "Mrecord" label="Twitter Stream\n(scheduled)"]; 

"Email Notification" -> "Time Series Chart" [dir = "back"]; 
"Email Notification" -> "Dilbert Daily Comics" [dir = "back"]; 
"Time Series Chart" -> "Twitter Stream" [dir = "back"]; 
"Sentiment Analysis" -> "Google News" [dir = "back"]; 
"Email Notification" -> "Sentiment Analysis" [dir = "back"]; 
} 
</script> 

그러나 viz.js 라이브러리는 2.3 MB입니다 :

enter image description here

도트 코드는 매우 간단합니다! 너무 큽니다.

D3.js에서 힘 지향 그래프와 같은 것을 사용하는 것이 가능합니까?

+0

힘 지시 레이아웃이 경우에 필요하지 않습니다 - 당신이 정적 레이아웃 것을 계산 뭔가를 찾고 있습니다. D3의 박스에서 즉시이 작업을 수행 할 수있는 방법은 없습니다. –

+0

조언 해 주셔서 감사합니다. 나는 jsPlumb을 가기로 결정했다. API는 잘 문서화되어 있으며 노드에 고정 된 위치로 사전 정의 된 DIV를 사용할 수있는 좋은 보너스입니다. – user1707810

답변

0

결국 jsPlumb이 jQuery Mobile js 및 css와 일부 영역에서 충돌하기 때문에 차트 작성 코드를 직접 작성하기로 결정했습니다. html5 캔버스에서 자신 만의 그림을 그리는 것은 어렵지 않고 '라이터'앱으로 끝납니다.

이 결과 :

Link to chart

관련 문제