ห้องสมุดการสร้างภาพกราฟในจาวาสคริปต์

ฉันมีโครงสร้างข้อมูลที่แสดงกราฟกำกับและฉันต้องการแสดงผลแบบไดนามิกในหน้า HTML กราฟเหล่านี้มักจะเป็นเพียงไม่กี่โหนดอาจเป็นสิบที่ปลายบนสุดดังนั้นฉันเดาว่าประสิทธิภาพจะไม่เป็นเรื่องใหญ่ โดยหลักการแล้วฉันต้องการเชื่อมต่อกับ jQuery เพื่อให้ผู้ใช้สามารถปรับแต่งเลย์เอาต์ด้วยตนเองโดยการลากโหนดรอบ ๆ

หมายเหตุ: ฉันไม่ได้กำลังมองหาไลบรารีแผนภูมิ

ฉันเพิ่งรวบรวมสิ่งที่คุณอาจมองหา: http://www.graphdracula.net

มันเป็นจาวาสคริปต์ที่มีการจัดวางกราฟโดยตรง SVG และคุณสามารถลากโหนดไปมาได้ ยังคงต้องการการปรับแต่ง แต่สามารถใช้งานได้อย่างสมบูรณ์ คุณสร้างโหนดและขอบอย่างง่ายดายด้วยรหัส JavaScript เช่นนี้:

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

ฉันใช้ไลบรารี Raphael JS ที่กล่าวถึงก่อนหน้านี้ (ตัวอย่าง graffle) บวกกับโค้ดบางส่วนสำหรับอัลกอริทึมการจัดวางกราฟแรงที่ฉันพบในเน็ต หากคุณมีข้อสังเกตหรือต้องการคุณสมบัติบางอย่างฉันอาจใช้มันเพียงแค่ถาม!

คุณอาจต้องการดูโครงการอื่นด้วย! ด้านล่างมีการเปรียบเทียบเมตาสองรายการ:

• SocialCompareมีรายการห้องสมุดมากมายและบรรทัด "Node / edge กราฟ" จะกรองภาพกราฟ

• DataVisualization.ch ได้ทำการประเมินหลายไลบรารีรวมถึงโหนด / กราฟ น่าเสียดายที่ไม่มีลิงก์โดยตรงดังนั้นคุณจะต้องกรอง "กราฟ":

นี่คือรายการของโครงการที่คล้ายกัน (บางส่วนได้รับการกล่าวถึงที่นี่):

ไลบรารี JavaScript ที่แท้จริง

• vis.jsรองรับกราฟเครือข่าย / ขอบหลายประเภทรวมถึงไทม์ไลน์และแผนภูมิ 2D / 3D เลย์เอาต์อัตโนมัติ, การจัดกลุ่มอัตโนมัติ, เอ็นจิ้นฟิสิกส์สปริง, เป็นมิตรกับมือถือ, การนำทางคีย์บอร์ด, เลย์เอาต์ลำดับชั้น, แอนิเมชั่นและอื่น ๆMIT ได้รับอนุญาตและพัฒนาโดย บริษัท ชาวดัตช์ที่เชี่ยวชาญด้านการวิจัย

• Cytoscape.js - การวิเคราะห์กราฟแบบอินเทอร์แอคทีฟและการสร้างภาพด้วยการรองรับอุปกรณ์เคลื่อนที่ตามอนุสัญญา jQuery ได้รับทุนจาก NIH ทุนและพัฒนาโดย@maxkfranz (ดูคำตอบของเขาด้านล่าง ) ด้วยความช่วยเหลือจากมหาวิทยาลัยหลายแห่งและองค์กรอื่น ๆ

• JavaScript InfoVis Toolkit - Jit การวาดกราฟเชิงโต้ตอบและโครงร่างเค้าโครง ดูตัวอย่างผ่อนชำระต้นไม้ สร้างโดยสถาปนิกดาต้าดาวิซของNicolas Garcia Belmonteและซื้อโดย Senchaในปี 2010

• D3.jsไลบรารีการสร้างภาพ JS อเนกประสงค์ที่มีประสิทธิภาพผู้สืบทอดของ Protovis ดูกราฟแรงกำกับตัวอย่างและตัวอย่างกราฟอื่น ๆ ในแกลเลอรี่

• ไลบรารีการสร้างภาพ JS ของ Plotlyใช้ D3.js กับการผูก JS, Python, R และ MATLAB ดูตัวอย่าง nexworkx ใน IPython นี่ตัวอย่างปฏิสัมพันธ์ของมนุษย์ที่นี่และJS ฝัง API

• sigma.jsไลบรารี่ที่มีน้ำหนักเบา แต่ทรงพลังสำหรับการวาดกราฟ

• jsPlumb jQuery ปลั๊กอินสำหรับการสร้างกราฟที่เชื่อมต่อแบบโต้ตอบ

• Springy - อัลกอริทึมเค้าโครงกราฟบังคับทิศทาง

• กำลังประมวลผลพอร์ต Javascript ของไลบรารีการประมวลผลโดย John Resig

• JS Graph It - กล่อง drag'n'drop เชื่อมต่อกันด้วยเส้นตรง เค้าโครงอัตโนมัติน้อยที่สุดของบรรทัด

• Graffle ของ RaphaelJS - ตัวอย่างกราฟเชิงโต้ตอบของไลบรารีวาดภาพเวกเตอร์เอนกประสงค์ทั่วไป RaphaelJS ไม่สามารถจัดวางโหนดได้โดยอัตโนมัติ คุณจะต้องมีห้องสมุดอื่นสำหรับสิ่งนั้น

• JointJS Core - ไลบรารีไดอะแกรมโอเพนซอร์สแบบลิขสิทธิ์ MPL ของ David Durman สามารถใช้เพื่อสร้างไดอะแกรมแบบคงที่หรือเครื่องมือสร้างไดอะแกรมแบบโต้ตอบอย่างสมบูรณ์และผู้สร้างแอปพลิเคชัน ทำงานได้ในเบราว์เซอร์ที่รองรับ SVG อัลกอริทึมเค้าโครงไม่รวมอยู่ในแพ็คเกจหลัก

• mxGraphไลบรารีไดอะแกรมเชิงพาณิชย์ HTML 5 ก่อนหน้านี้มีให้ใช้ภายใต้ Apache v2.0 mxGraph เป็นห้องสมุดฐานที่ใช้ในการdraw.io

ห้องสมุดพาณิชย์

• GoJS Interactive การวาดกราฟและไลบรารีเลย์เอาต์

• yFiles สำหรับ HTML การวาดกราฟเชิงพาณิชย์และไลบรารีเลย์เอาต์

• ชุดเครื่องมือสร้างภาพข้อมูลเครือข่ายKeyLines Commercial JS

• ZoomChartsห้องสมุดสร้างภาพอเนกประสงค์

• ห้องสมุดไดอะแกรมเชิงพาณิชย์Syncfusion JavaScript Diagramสำหรับการวาดและการสร้างภาพ

ห้องสมุดที่ถูกทิ้งร้าง

• Cytoscape Web Viewer เครือข่าย JS แบบฝังได้ (ไม่มีการวางแผนคุณสมบัติใหม่; ประสบความสำเร็จโดย Cytoscape.js)

• Canviz JS rendererสำหรับกราฟ Graphviz ถูกทอดทิ้งในเดือนกันยายน 2013

• arbor.js การทำกราฟอย่างพิถีพิถันด้วยฟิสิกส์และขนมตา ถูกปล่อยปละละเลยในเดือนพฤษภาคม 2555 มีส้อมไว้หลายกึ่ง

• jssvggraph "อัลกอริธึมการวางผังกราฟบังคับง่ายที่สุดที่เป็นไปได้นำมาใช้เป็นไลบรารี Javascript ที่ใช้วัตถุ SVG" ถูกทอดทิ้งในปี 2555

• แอปพลิเคชันการวาดกราฟฝั่งไคลเอ็นต์jsdot ที่ถูกทิ้งร้างในปี 2011

• ชุดเครื่องมือกราฟิกProtovisสำหรับการสร้างภาพ (JavaScript) ถูกแทนที่ด้วย d3

• การเป็นตัวแทน JS ของMoo Wheel Interactive สำหรับการเชื่อมต่อและความสัมพันธ์ (2008)

• JSViz 2007 กราฟแสดงภาพประกอบกราฟของสคริปต์

• dagre Graph layout สำหรับ JavaScript

ไลบรารีที่ไม่ใช่ Javascript

• Graphvizภาษากราฟการสร้างภาพที่ซับซ้อน

  • Graphviz ได้รับการคอมไพล์ไปยัง Javascript โดยใช้ Emscripten ที่นี่พร้อมกับตัวอย่างการโต้ตอบออนไลน์ที่นี่

• Flare การวาดกราฟตาม Flash ที่สวยงามและทรงพลัง

• การแสดงกราฟNodeBox Python

ข้อจำกัดความรับผิดชอบ: ฉันเป็นผู้พัฒนา Cytoscape.js

Cytoscape.js เป็นห้องสมุดสร้างภาพกราฟ HTML5 API มีความซับซ้อนและเป็นไปตามอนุสัญญา jQuery รวมถึง

• ตัวเลือกสำหรับการสืบค้นและการกรอง ( cy.elements("node[weight >= 50].someClass")ทำเท่าที่คุณต้องการ)
• การผูกมัด (เช่นcy.nodes().unselect().trigger("mycustomevent"))
• ฟังก์ชั่นที่เหมือน jQuery สำหรับเชื่อมโยงกับเหตุการณ์
• องค์ประกอบเป็นชุด (เช่น jQuery มีชุดของ HTMLDomElements)
• ความสามารถในการขยาย (สามารถเพิ่มเลย์เอาต์ที่กำหนดเอง, UI, คอร์ & ฟังก์ชันคอลเลกชันและอื่น ๆ )
• และอื่น ๆ.

หากคุณกำลังคิดที่จะสร้าง webapp อย่างจริงจังด้วยกราฟคุณควรพิจารณา Cytoscape.js อย่างน้อย ฟรีและโอเพ่นซอร์ส:

http://js.cytoscape.org

JsVISค่อนข้างดี แต่ช้ากว่าด้วยกราฟที่ใหญ่กว่าและถูกยกเลิกไปตั้งแต่ปี 2550

prefuseเป็นชุดเครื่องมือซอฟต์แวร์สำหรับสร้างการสร้างภาพข้อมูลเชิงโต้ตอบที่สมบูรณ์ใน Java flare เป็นไลบรารี ActionScript สำหรับสร้างภาพข้อมูลที่ทำงานใน Adobe Flash Player ซึ่งถูกละทิ้งตั้งแต่ปี 2012

ในสถานการณ์เชิงพาณิชย์ผู้แข่งขันที่จริงจังอย่างแน่นอนคือyFiles สำหรับ HTML :

มันมี:

• นำเข้าข้อมูลที่กำหนดเองได้ง่าย( ตัวอย่างออนไลน์เชิงอินเทอร์แอคทีฟนี้ดูเหมือนว่าจะทำสิ่งที่ OP ต้องการอย่างแท้จริง)
• การแก้ไขเชิงโต้ตอบสำหรับการสร้างและจัดการไดอะแกรมผ่านท่าทางของผู้ใช้ (ดูตัวแก้ไขทั้งหมด)
• API การเขียนโปรแกรมขนาดใหญ่สำหรับปรับแต่งทุกด้านของไลบรารี
• รองรับการจัดกลุ่มและซ้อนกัน (ทั้งแบบอินเทอร์แอคทีฟและอัลกอริธึมเลย์เอาต์)
• ไม่ได้ขึ้นอยู่กับชุดเครื่องมือ UI specfic แต่สนับสนุนการรวมเข้ากับชุดเครื่องมือ Javascript ที่มีอยู่เกือบทั้งหมด (ดูการสาธิต "การรวม" )
• เลย์เอาต์อัตโนมัติ (รูปแบบต่าง ๆ เช่น "ลำดับชั้น", "อินทรีย์", "มุมฉาก", "ต้นไม้", "วงกลม", "รัศมี" และอื่น ๆ )
• การกำหนดเส้นทางขอบอัตโนมัติที่ซับซ้อน (การจัดเส้นทางแบบมุมฉากและแบบออร์แกนิกพร้อมการหลีกเลี่ยงสิ่งกีดขวาง)
• รูปแบบที่เพิ่มขึ้นและบางส่วน (การเพิ่มและลบองค์ประกอบและเพียงเล็กน้อยหรือไม่เลยเปลี่ยนส่วนที่เหลือของแผนภาพ)
• รองรับการจัดกลุ่มและซ้อนกัน (ทั้งแบบอินเทอร์แอคทีฟและอัลกอริธึมเลย์เอาต์)
• การใช้งานของอัลกอริทึมการวิเคราะห์กราฟ (เส้นทาง, ศูนย์กลาง, กระแสเครือข่าย, ฯลฯ )
• ใช้เทคโนโลยี HTML 5 เช่น SVG + CSS และ Canvas และคุณสมบัติการใช้ประโยชน์จาก Javascript สมัยใหม่และคุณสมบัติอื่น ๆ ของ ES5 และ ES6 (แต่ด้วยเหตุผลเดียวกันนี้จะไม่ทำงานใน IE เวอร์ชัน 8 และต่ำกว่า)
• ใช้ API แบบแยกส่วนที่สามารถโหลดได้ตามต้องการโดยใช้ตัวโหลด UMD

นี่คือตัวอย่างการแสดงผลที่แสดงคุณสมบัติส่วนใหญ่ที่ร้องขอ:

การเปิดเผยแบบเต็ม: ฉันทำงานให้กับ yWorks แต่ใน Stackoverflow ฉันไม่ได้เป็นตัวแทนของนายจ้างของฉัน

ดังที่กูรูซกล่าวถึงJITมีรูปแบบกราฟ / ต้นไม้ที่น่ารักหลายรูปแบบรวมถึงการสร้างภาพ RGraph และ HyperTree ที่น่าดึงดูดใจ

นอกจากนี้ฉันเพิ่งจะติดตั้งระบบ SVG แบบง่าย ๆที่ gitHub (ไม่ต้องพึ่งพา ~ 125 LOC) ที่ควรจะทำงานได้ดีพอสำหรับกราฟขนาดเล็กที่แสดงในเบราว์เซอร์สมัยใหม่