Javascript/CSS'de temel akış diyagramlarını oluşturmak için bir kütüphane var mı?

Question

Bir web sayfasında dinamik olarak çok temel akış diyagramlarını, yani satırların birleştirdiği birkaç kutuyu işlemek istiyorum. İdeal olarak kullanıcı daha sonra bu kutulardan birini (DIV'ler) tıklayabilir ve farklı bir sayfaya götürebilir. Flash için Resorting bir overkill gibi görünüyor. Bunu gerçekleştirmeye yardımcı olabilecek herhangi bir istemci tarafı (yani sunucu agnostiği) Javascript veya CSS kütüphanesi/tekniğinin farkında olan var mı?

Answer 1

Oluşturma istemci tarafında mı olmalı? bunu sunucu tarafı yapabiliyorsa

http://ejohn.org/blog/processingjs/

ardından Graphviz iyi bir seçimdir:

evet ise, İşleme deneyebilirsin.

http://www.graphviz.org/

Answer 2

akış şeması Bu tür overkill olabilir JavaScript grafik kütüphaneleri başvurmadan, (tuval) CSS kullanarak gerçekleştirilebilir. Bazı soybilim sitelerinin aile ağacı almak için bunu nasıl yaptığını kontrol etmek isteyebilirsiniz.

Answer 3

Bulunan en iyi ve en basit, js-graph.it.

Ayrıca bu yararlı özelliği de vardır: deciding the orientation of the flow. Örneğin, benim durumumda bir belge iş akışım var, bu yüzden sağ tarafa doğru akması gerekiyor.

Daha da basit bir alternatif wz_jsGraphics. Benim durumumda şu şekilde okları çiziyorum:

/**Draw an arrow made of 3 lines. 
* Requires wz_jsGraphics (http://www.walterzorn.de/en/jsgraphics/jsgraphics_e.htm). 
* @canvas a jsGraphics object used as canvas 
* @blockFrom id of the object from which the arrow starts 
* @blockTo id of the object where the arrow ends with a arrowhead 
*/ 
function drawArrow(canvas, blockFrom, blockTo){ 

    //blocks 
    var f = $("#" + blockFrom); 
    var t = $("#" + blockTo); 

    //lines positions and measures 
    var p1 = { left: f.position().left + f.outerWidth(), top: f.position().top + f.outerHeight()/2 }; 
    var p4 = { left: t.position().left,      top: t.position().top + t.outerHeight()/2 }; 
    var mediumX = Math.abs(p4.left - p1.left)/2; 
    var p2 = { left: p1.left + mediumX,     top: p1.top }; 
    var p3 = { left: p1.left + mediumX,     top: p4.top }; 

    //line A 
    canvas.drawLine(p1.left, p1.top, p2.left, p2.top); 
    //line B 
    canvas.drawLine(p2.left, p2.top, p3.left, p3.top); 
    //line C 
    canvas.drawLine(p3.left, p3.top, p4.left, p4.top); 
    //arrowhead 
    canvas.drawLine(p4.left - 7, p4.top - 4,  p4.left, p4.top); 
    canvas.drawLine(p4.left - 7, p4.top + 4,  p4.left, p4.top); 
} 

var jg = new jsGraphics('myCanvasDiv'); 
drawArrow(jg, 'myFirstBlock', 'mySecondBlock'); 
jg.paint();