Saf JavaScript Graphviz eşdeğeri [kapalı]

139

Herkes GraphViz üretebilir yönlü akış diyagramları saf, Javascript tabanlı bir uygulama farkında mı? Güzel görsel çıktılarla ilgilenmiyorum, ancak bir ağaç yerine bir grafikle uğraşırken kesişen kenarların sayısını en aza indirgemek için optimize edilmiş bezier çizgilerinin düzeniyle birlikte her düğümün maksimum derinliğini anlamaya yönelik hesaplamalar bilginin. Bu kodu hem tarayıcı içinde çalıştırmak istiyorum; Graphviz'i kolayca bir uzantı olarak Düğüm sunucuma gömebileceğimin farkındayım, hatta popen()onu ve .dotformattaki grafik bilgileri üzerinden akabilirim .

Referans olarak, burada tipik bir GraphViz çıktısı verilmiştir. Bağlantı çizgilerinin, kesişmeden (çok sık) veya düğümlerden geçmeden düğümler arasında dolaşmasına izin vermek için öğelerin nasıl istiflendiğini ve aralandığını unutmayın.

resim açıklamasını buraya girin

javascript  graphviz 
— Armentage
kaynak
GraphViz'e aşina olmayanlarımız için böyle bir diyagram örneği var mı?
— Matt Ball
— Daniel Pryden
3
Belki - kontrol et. Yorum ve tepkilerin bir sürü GraphViz gibi hiç bir şey değildir, ya sadece yeteneğine sahip araçlar grafik yönlendirilmiþ çizim GraphViz çıktı ama düzenini kendileri yapamaz.
— Armentage

Yanıtlar:

84

Bir .dot tuval oluşturucusunun şu saf JavaScript uygulamasına bir göz atın:

http://ushiroad.com/jsviz/

Kütüphane belgelenmemiştir - yazar kesinlikle daha fazla duyurmalı ve belgelemelidir (en azından github'a koymasını önermek için onunla iletişime geçeceğim).

Güncelleme : kod github'a aktarıldı: https://github.com/gyuque/livizjs

Güncelleme (14.02.2013) : başka bir yarışmacı ortaya çıktı! konuyla ilgilenen herkes kesinlikle Viz.js örnek sayfasına ve github repo'suna bir göz atmalıdır .

Güncelleme (7/16/2020) : (yedi yıl sonra) http://webgraphviz.com/ da harika! :-)

— Greg Sadetsky
kaynak
1
Bu proje harika görünüyor ve muhtemelen gördüğüm her şeyin en iyi çözümü, ancak nasıl kullanılacağını anlamak kesinlikle kaynakta biraz kazma gerektirecek. Kod oldukça makul görünüyor, bu yüzden o kadar da kötü olmayabilir.
— captncraig
Şimdiye kadar, bu orijinal soruda aradığım şeylere en yakın olanı. Sadece bir RENDERER değil, aynı zamanda yönlendirilmiş grafiğin nasıl hesaplanacağını da biliyor. Bir yerde bir arka uçta DOT çalışıyor mu yoksa tüm grafik oluşturma algoritması tarayıcımda mı çalışıyor?
— Ermenistan
1
@Armentage, tamamen tarayıcınızda çalışıyor. Graphviz JavaScript derlenmiştir, sayesinde emscripten . Kaynak kodu, olabildiğince belgelenmemiş olsa da, şimdi neyse ki (yazarı Twitter ve e-posta üzerinden çektikten sonra) ;-) burada mevcuttur . Projeyi istemek ve kullanımı kolay bir API yapmak ilk adımdır ..!
— Greg Sadetsky
5
Sadece Graph Dracula kütüphanesini aday listesine eklemek istedim . Burada bir demo görebilirsiniz . Grafiği hesaplar ve görüntüler ( Raphael kullanarak ); kod kısa ve temiz.
— Greg Sadetsky
Livizjs harika bir araçtır, ancak 'kümeler' gibi tam dili desteklemediğini unutmayın
— SirLenz0rlot
37

Uzakta aradıktan sonra sonunda cevabı buldum.

Çözüm, birisi llvm + emscripten kullanarak Graphviz'i Javascript'e derledi. Bağlantı burada:

http://viz-js.com/

Kaynak şu adreste bulunabilir: https://github.com/mdaines/viz.js

Ve bir web sayfasını kullanmak için:

var graphviz_text = ...;
document.body.innerHTML += Viz(graphviz_text, "svg");
— Zachary Vorhies
kaynak
Tam da aradığım şey bu
— RobAu
6
Güncelleme: Viz.js'de kancalamanın eğlenceli ve kolay olduğunu gösteren bir demo sitesi yaptım!
— Www.webgraphviz.com
Sağlanan github bağlantıları bozuldu
— Jaime
2
— Somu
11

'PDF okuyucu' örneğinde olduğu gibi graphviz'i javascript'e dönüştürmeyi deneyebilirsiniz: https://github.com/kripken/emscripten

— pedroteixeira
kaynak
Bu delicesine harika bir öneri. Kendimi JS kod çevirmeye çalışırken düşünüyordum ...... ama bu llvm hile güzel delilik!
— Armentage
Aslında bu şimdiye kadar bir çift denedim verdim .. emscripten hala oldukça genç ve belge kısa. Kesinlikle izlemek için harika bir proje, nasıl çok fazla güç sağlayabildiğini görebiliyorum. Ama şimdi onu yazan kişi siz değilseniz, biraz hantal.
— synthesizerpatel
8

Bu hazır bir grafik değiştirme değil ama d3.js , verilen verilerden çeşitli düzenler yapabilen ve üzerinde grafik düzenini uygulamak için harika bir platform olacak bir kütüphanedir.

İşte graphviz'in yaptıklarından biri olan kuvvet yönelimli düzenlere bir örnek .

İşte inanılmaz harika etkileşimli slaytlarla düzenler hakkında bir konuşma .

Projeyi tanımak için eğiticiler çok iyi.

— w00t
kaynak
1
github.com/cpettitt/dagre-d3 , JavaScript'te DOT diyagramı uygular. Demo ile cpettitt.github.io/project/dagre-d3/latest/demo/… adresinden oynayabilirsiniz .
— Arthur2e5
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.