2013-07-31 6 views
2

Я сделал эту диаграмму с viz.js.Как сделать диаграмму с диаграммой направленности в D3.js?

enter image description here

Код Dot очень прост:

<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! Это слишком велико.

Можно ли сделать то же самое с чем-то вроде направленного по силе графа в D3.js?

+0

Сила направлена ​​раскладка не то, что вам нужно в этом случае - вы ищете что-то вычисляет, что расположение статически. Ничто из этого не сделает для вас из коробки в D3. –

+0

Благодарим вас за советы. Я решил пойти на jsPlumb. API хорошо документирован, и это хороший бонус, что вы можете использовать предопределенные DIV с фиксированной позицией для узлов. – user1707810

ответ

0

В конце концов я решил написать код диаграммы сам, потому что jsPlumb столкнулся в некоторых областях с jQuery Mobile js и css. Нетрудно сделать собственный рисунок на холсте html5, и вы получите «более легкое» приложение.

Это результат:

Link to chart

 Смежные вопросы

  • Нет связанных вопросов^_^