JavaScript'te grafik görselleştirme kitaplığı

Yönlendirilmiş bir grafiği temsil eden bir veri yapısı var ve bunu bir HTML sayfasında dinamik olarak işlemek istiyorum. Bu grafikler genellikle sadece birkaç düğüm, belki de en üstte on olacak, bu yüzden tahminim performansın büyük bir şey olmayacağı. İdeal olarak, kullanıcıların düğümleri sürükleyerek mizanpajı elle ayarlayabilmeleri için jQuery ile bağlanabilmek istiyorum.

Not: Grafik kitaplığı aramıyorum.

Ne arayabileceğinizi bir araya getirdim: http://www.graphdracula.net

Yönlendirilmiş grafik düzeni, SVG ile JavaScript ve hatta düğümleri sürükleyebilirsiniz. Yine de bazı ayarlamalar gerekiyor, ancak tamamen kullanılabilir. Düğümleri ve kenarları aşağıdaki gibi JavaScript koduyla kolayca oluşturursunuz:

var g = new Graph();
g.addEdge("strawberry", "cherry");
g.addEdge("cherry", "apple");
g.addEdge("id34", "cherry");

Daha önce bahsedilen Raphael JS kütüphanesini (graffle örneği) artı nette bulduğum bir kuvvet tabanlı grafik düzeni algoritması için bazı kodlar kullandım (her şey açık kaynak, MIT lisansı). Herhangi bir fikriniz varsa veya belirli bir özelliğe ihtiyacınız varsa, bunu uygulayabilirim, sadece sorun!

Başka projelere de göz atmak isteyebilirsiniz! Aşağıda iki meta karşılaştırma bulunmaktadır:

• SocialCompare kitaplıkların kapsamlı bir listesine sahiptir ve "Düğüm / kenar grafiği" satırı, grafik görselleştirmeleri için filtre uygular .

• DataVisualization.ch, düğüm / grafik olanlar da dahil olmak üzere birçok kütüphaneyi değerlendirdi. Ne yazık ki doğrudan bir bağlantı yok, bu yüzden "grafik" için filtrelemeniz gerekecek:

İşte benzer projelerin bir listesi (bazıları burada zaten belirtilmiştir):

Saf JavaScript Kütüphaneleri

• vis.js , birçok ağ / kenar grafiği türünün yanı sıra zaman çizelgeleri ve 2B / 3B grafikleri destekler. Otomatik düzen, otomatik kümeleme, yaylı fizik motoru, mobil dostu, klavye navigasyon, hiyerarşik düzen, animasyon vb MİT lisanslı ve kendi kendini yöneten ağlar üzerinde araştırma konusunda uzmanlaşmış Hollandalı bir firma tarafından geliştirilen.

• Cytoscape.js - jQuery kurallarını takiben mobil destekli etkileşimli grafik analizi ve görselleştirme. NIH hibeleri ile finanse edildi ve @maxkfranz tarafından geliştirildi ( aşağıdaki cevabına bakınız ), çeşitli üniversiteler ve diğer kuruluşların yardımıyla.

• JavaScript InfoVis Toolkit - Jit, etkileşimli, çok amaçlı bir grafik çizim ve düzen çerçevesi. Örneğin bkz . Hiperbolik Ağaç . Twitter dataviz mimarı Nicolas Garcia Belmonte tarafından inşa edilmiş ve 2010 yılında Sencha tarafından satın alınmıştır .

• D3.js Güçlü çok amaçlı JS görselleştirme kütüphanesi, Protovis'in halefi. Bkz kuvvet yönelik grafik örneği ve diğer grafik örnekleri galeri .

• Plotly'nin JS görselleştirme kitaplığı, JS, Python, R ve MATLAB bağlamaları ile D3.js kullanır. İpython bir nexworkx örneğe bakın burada , insan etkileşimi örneği burada ve JS yerleştir API .

• sigma.js Grafik çizmek için hafif ama güçlü kütüphane

• Etkileşimli bağlı grafikler oluşturmak için jsPlumb jQuery eklentisi

• Springy - kuvvete yönelik bir grafik düzeni algoritması

• Processing.js John Resig tarafından İşleme kütüphanesinin Javascript portu

• JS Graph It - düz çizgilerle bağlı sürükle ve bırak kutuları. Çizgilerin minimum otomatik yerleşimi.

• RaphaelJS's Graffle - jenerik çok amaçlı vektör çizim kütüphanesinin interaktif grafik örneği. RaphaelJS düğümleri otomatik olarak düzenleyemez; bunun için başka bir kütüphaneye ihtiyacınız olacak.

• JointJS Core - David Durman'ın MPL lisanslı açık kaynak diyagram kitaplığı. Statik diyagramlar veya tamamen etkileşimli diyagram araçları ve uygulama oluşturucuları oluşturmak için kullanılabilir. SVG'yi destekleyen tarayıcılarda çalışır. Çekirdek pakete dahil olmayan düzen algoritmaları

• mxGraph Daha önce ticari olan HTML 5 diyagram kitaplığı, şimdi Apache v2.0 altında. mxGraph kullanılan temel kütüphane draw.io .

Ticari kütüphaneler

• GoJS Etkileşimli grafik çizimi ve düzen kütüphanesi

• HTML Ticari grafik çizimi ve mizanpaj kütüphanesi için yFiles

• KeyLines Ticari JS ağ görselleştirme araç seti

• ZoomCharts Ticari çok amaçlı görselleştirme kütüphanesi

• Syncfusion JavaScript Diagram Çizim ve görselleştirme için ticari diyagram kütüphanesi.

Terk edilmiş kütüphaneler

• Cytoscape Web Yerleşik JS Ağ görüntüleyicisi (planlanan yeni özellik yok; başarılı Cytoscape.js)

• Graphviz grafikleri için Canviz JS oluşturucu . Eylül 2013'te terk edildi.

• arbor.js Güzel fizik ve göz şekerleriyle sofistike grafik oluşturma. Mayıs 2012'de terk edilmiştir. Yarı bakımı yapılmış birkaç çatal mevcuttur.

• jssvggraph "SVG nesnelerini kullanan bir Javascript kütüphanesi olarak uygulanan olası en basit kuvvet yönelimli grafik düzeni algoritması". 2012 yılında terk edildi.

• jsdot İstemci tarafı grafik çizim uygulaması. 2011 yılında terk edildi .

• Görselleştirme için Protovis Grafiksel Araç Seti (JavaScript). D3 ile değiştirildi.

• Bağlantılar ve ilişkiler için Moo Wheel Interactive JS temsili (2008)

• JSViz 2007 dönemi grafik görselleştirme komut dosyası

• dagre JavaScript için grafik düzeni

Javascript Dışı Kütüphaneler

• Graphviz Gelişmiş grafik görselleştirme dili

  • Graphviz Emscripten'i kullanarak burada çevrimiçi interaktif bir demo ile Javascript'e derlenmiştir.

• Flare Güzel ve güçlü Flash tabanlı grafik çizimi

• NodeBox Python Grafik Görselleştirme

Feragatname: Ben Cytoscape.js'nin geliştiricisiyim

Cytoscape.js bir HTML5 grafik görselleştirme kütüphanesidir. API karmaşıktır ve aşağıdakileri içeren jQuery kurallarını takip eder

• sorgulama ve filtreleme için seçiciler ( cy.elements("node[weight >= 50].someClass")beklediğiniz kadarını yapar),
• zincirleme (örneğin cy.nodes().unselect().trigger("mycustomevent")),
• Olaylara bağlanmak için jQuery benzeri işlevler,
• koleksiyon olarak öğeler (jQuery'de HTMLDomElements koleksiyonları var gibi),
• genişletilebilirlik (özel düzenler, kullanıcı arayüzü, çekirdek toplama işlevleri vb. ekleyebilir),
• ve dahası.

Grafiklerle ciddi bir web uygulaması oluşturmayı düşünüyorsanız, en azından Cytoscape.js'yi düşünmelisiniz. Ücretsiz ve açık kaynak:

http://js.cytoscape.org

JsVIS oldukça güzeldi, ancak daha büyük grafiklerle yavaştı ve 2007'den beri terk edildi.

prefuse , Java'da zengin etkileşimli veri görselleştirmeleri oluşturmak için bir dizi yazılım aracıdır. flare , Adobe Flash Player'da çalışan ve 2012'den beri terk edilen görselleştirmeler oluşturmak için bir ActionScript kütüphanesidir.

Ticari bir senaryoda, ciddi bir yarışmacı HTML için yFiles :

Sunduğu:

• Özel verilerin kolayca içe aktarılması ( bu etkileşimli çevrimiçi demo , OP'nin tam olarak aradığı şeyi yapıyor gibi görünüyor)
• Diyagramları kullanıcı hareketleriyle oluşturmak ve değiştirmek için etkileşimli düzenleme (tüm düzenleyiciye bakın )
• Kütüphanenin her yönünü özelleştirmek için büyük bir programlama API'sı
• Gruplama ve iç içe yerleştirme desteği (hem etkileşimli hem de düzen algoritmaları aracılığıyla)
• Belirli bir kullanıcı arayüzü araç setine bağlı değildir, ancak neredeyse tüm mevcut Javascript araç setine entegrasyonu destekler ( "entegrasyon" demolarına bakın )
• Otomatik düzen ("hiyerarşik", "organik", "dikey", "ağaç", "dairesel", "radyal" vb.)
• Otomatik gelişmiş kenar yönlendirme (engellerden kaçınarak dikey ve organik kenar yönlendirme)
• Artımlı ve kısmi düzen (elemanların eklenmesi ve çıkarılması ve şemanın geri kalanının çok az değiştirilmesi veya hiç değiştirilmemesi)
• Gruplama ve iç içe yerleştirme desteği (hem etkileşimli hem de düzen algoritmaları aracılığıyla)
• Uygulamaları grafik analiz algoritmaları (yollar, merkezcilikleri, ağ akar, vs.)
• SVG + CSS ve Canvas gibi HTML 5 teknolojilerini ve modern Javascript kaldıraç özelliklerini ve diğer ES5 ve ES6 özelliklerini kullanır (ancak aynı nedenle IE sürüm 8 ve daha düşük sürümlerde çalışmaz).
• UMD yükleyiciler kullanılarak istek üzerine yüklenebilen modüler bir API kullanır

İstenen özelliklerin çoğunu gösteren örnek bir oluşturma:

Tam açıklama: yWorks için çalışıyorum, ancak Stackoverflow üzerinde işverenimi temsil etmiyorum.

Guruzun belirttiği gibi, JIT oldukça çekici RGraph ve HyperTree görselleştirmeleri de dahil olmak üzere birkaç güzel grafik / ağaç düzenine sahiptir.

Ayrıca, modern tarayıcılarda görüntülenen küçük grafikler için yeterince iyi çalışması gereken github'a (bağımlılık yok, ~ 125 LOC) süper basit bir SVG tabanlı uygulama koydum .