Có thư viện nào để hiển thị sơ đồ luồng cơ bản trong Javascript/CSS không?

Question

Trên một trang web, tôi muốn tự động hiển thị sơ đồ lưu lượng rất cơ bản, tức là một vài ô được nối bằng các dòng. Lý tưởng nhất là người dùng có thể nhấp vào một trong các hộp này (DIV?) Và được đưa đến một trang khác. Resorting to Flash có vẻ như quá mức cần thiết. Có ai biết về bất kỳ thư viện/kỹ thuật Javascript hoặc CSS nào của máy khách có thể giúp đạt được điều này không?

Answer 1

Giao diện có phải là phía máy khách không?

Nếu có, bạn có thể thử chế biến:

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

Nếu bạn có thể làm điều đó phía máy chủ, sau đó Graphviz là một lựa chọn tốt.

http://www.graphviz.org/

Answer 2

Đây là loại sơ đồ có thể được thực hiện sử dụng CSS, phải dùng đến các thư viện đồ họa JavaScript (vải) có thể là quá mức cần thiết. Bạn có thể muốn kiểm tra như thế nào một số trang web phả hệ làm điều này để có được một cây gia đình.

Answer 3

Điều tốt nhất và đơn giản nhất tôi tìm thấy là js-graph.it.

Nó cũng có tính năng hữu ích này: deciding the orientation of the flow. Ví dụ, trong trường hợp của tôi, tôi có một luồng công việc tài liệu, vì vậy tôi cần nó để chạy về phía bên phải.

Một lựa chọn đơn giản hơn là wz_jsGraphics. Trong trường hợp của tôi, tôi vẽ các mũi tên như sau:

/**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();