เทียบเท่า JavaScript Graphviz บริสุทธิ์ [ปิด]

139

ตามที่เป็นอยู่ในปัจจุบันคำถามนี้ไม่เหมาะสำหรับรูปแบบคำถาม & คำตอบของเรา เราคาดหวังคำตอบที่จะได้รับการสนับสนุนจากข้อเท็จจริงการอ้างอิงหรือความเชี่ยวชาญ แต่คำถามนี้มีแนวโน้มที่จะเรียกร้องให้มีการอภิปรายโต้แย้งโต้แย้งหรือการอภิปรายเพิ่มเติม หากคุณรู้สึกว่าคำถามนี้สามารถปรับปรุงและเปิดใหม่ได้โปรดไปที่ศูนย์ช่วยเหลือเพื่อขอคำแนะนำ

ปิดให้บริการใน7 ปีที่ผ่านมา

มีใครบ้างที่ทราบถึงการใช้จาวาสคริปต์ในการกำหนดทิศทางการไหลที่บริสุทธิ์ซึ่ง GraphViz สามารถสร้างได้? ฉันไม่สนใจผลลัพธ์ที่ออกมาเป็นภาพสวย แต่การคำนวณเพื่อหาความลึกสูงสุดของแต่ละโหนดพร้อมกับเลย์เอาต์ของเส้น bezier ที่ปรับให้เหมาะสมเพื่อลดจำนวนของการตัดขอบเมื่อคุณจัดการกับกราฟแทนที่จะเป็นต้นไม้ ของข้อมูล ฉันต้องการเรียกใช้รหัสนี้ทั้งภายในเบราว์เซอร์ ฉันทราบว่าฉันสามารถฝัง Graphviz ลงในเซิร์ฟเวอร์ Node ของฉันได้อย่างง่ายดายเป็นส่วนขยายหรือแม้กระทั่งpopen()และส่งผ่านข้อมูลกราฟใน.dotรูปแบบ

สำหรับการอ้างอิงต่อไปนี้เป็นเอาต์พุต GraphViz ทั่วไป สังเกตว่าองค์ประกอบถูกซ้อนและเว้นระยะเพื่อให้เส้นเชื่อมต่อเดินทางระหว่างโหนดโดยไม่ต้องตัดกัน (บ่อยครั้ง) หรือผ่านโหนด

ป้อนคำอธิบายรูปภาพที่นี่

javascript graphviz

— Armentage
แหล่งที่มา

คุณมีตัวอย่างของแผนภาพดังกล่าวหรือไม่สำหรับพวกเราที่ไม่คุ้นเคยกับ GraphViz

— Matt Ball

ดูเหมือนว่าจะเป็นรหัสซ้ำของการสร้างภาพกราฟในจาวาสคริปต์หรือไม่

— Daniel Pryden

3

อาจจะ - ตรวจสอบมันออกมา ความคิดเห็นและการตอบกลับจำนวนมากชี้ไปที่เครื่องมือสร้างแผนภูมิที่ไม่มีอะไรเหมือน GraphViz หรือมีความสามารถในการวาดเอาต์พุต GraphViz เท่านั้น แต่ไม่สามารถทำโครงร่างเองได้

— Armentage

84

ดูการใช้งานจาวาสคริปต์แท้ๆของ. render dot ผ้าใบ:

http://ushiroad.com/jsviz/

ห้องสมุดไม่ได้รับการบันทึก - ผู้เขียนควรเผยแพร่และจัดทำเอกสารมากกว่านี้ (ฉันจะติดต่อเขาเพื่อแนะนำให้เขาวางไว้บน github อย่างน้อยที่สุด)

อัปเดต : รหัสถูกส่งไปที่ github: https://github.com/gyuque/livizjs

อัปเดต (14/2/2556) : คู่แข่งรายอื่นได้เกิดขึ้นแล้ว! ใครที่สนใจในเรื่องที่แน่นอนควรจะดูที่ Viz.js ของหน้าตัวอย่างและrepo GitHub

Update (7/16/2020) : (เจ็ดปีต่อมา) http://webgraphviz.com/ก็เยี่ยมเช่นกัน! :-)

— Greg Sadetsky
แหล่งที่มา

1

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

— captncraig

จนถึงตอนนี้มันใกล้เคียงที่สุดกับสิ่งที่ฉันกำลังมองหาในคำถามเดิม มันไม่ได้เป็นเพียง RENDERER มันรู้วิธีคำนวณกราฟกำกับด้วยเช่นกัน มันใช้ DOT บนแบ็กเอนด์หรือไม่หรืออัลกอริธึมการสร้างกราฟทั้งหมดทำงานบนเบราว์เซอร์ของฉันหรือไม่?

— Armentage

1

@Armentage มันทำงานในเบราว์เซอร์ของคุณทั้งหมด Graphviz ได้รับการรวบรวมเพื่อ JavaScript ขอบคุณemscripten รหัสที่มาแม้ว่าจะไม่ได้เป็นเอกสารที่มันอาจจะเป็นตอนนี้โชคดี (หลังจากจู้จี้ผู้เขียนมากกว่าทวิตเตอร์และ e-mail) ;-) ใช้ได้ที่นี่ การทำโปรเจ็คต์และทำ API ที่ใช้งานง่ายจะเป็นขั้นตอนแรกที่ยอดเยี่ยม .. !

— เกร็ก Sadetsky

5

แค่ต้องการเพิ่มไลบรารีGraph Draculaในรายการผู้สมัคร คุณสามารถดูการสาธิตที่นี่ มันคำนวณกราฟและแสดงมัน (โดยใช้กราฟิลส์ ); รหัสสั้นและสะอาด

— เกร็ก Sadetsky

Livizjs เป็นเครื่องมือที่ยอดเยี่ยม แต่โปรดทราบว่ามันไม่รองรับภาษาเต็มรูปแบบเช่น 'กลุ่ม'

— SirLenz0rlot

37

หลังจากค้นหาไปไกลแล้วฉันก็พบคำตอบในที่สุด

วิธีแก้ปัญหาคือมีคนข้าม Graphviz ที่รวบรวมไปยัง Javascript โดยใช้ llvm + emscripten นี่คือลิงค์:

http://viz-js.com/

พบแหล่งข้อมูลได้ที่: https://github.com/mdaines/viz.js

และเพื่อให้ใช้งานเว็บเพจได้ง่ายขึ้น:

var graphviz_text = ...;
document.body.innerHTML += Viz(graphviz_text, "svg");

— Zachary Vorhies
แหล่งที่มา

นี่คือสิ่งที่ฉันกำลังมองหาเช่นกัน

— RobAu

6

อัปเดต: ฉันสร้างเว็บไซต์ตัวอย่างซึ่งแสดงให้เห็นว่าการเชื่อมต่อใน viz.js นั้นสนุกและง่ายดายได้อย่างไร! ตรวจสอบได้ที่ www.webgraphviz.com

— Zachary Vorhies

ลิงก์ github ที่ให้มานั้นเสีย

— Jaime

2

github.com/mdaines/viz.js

— Somu

19

หลังจากดูตัวเลือกทั้งหมดฉันพบ viz.js ( https://github.com/mdaines/viz.js/ ) ซึ่งอ้างอิงจาก jsviz และ graphviz.js เพื่อให้ API ใช้งานได้จริงจากหน้าเว็บและมีตัวอย่างเพียงพอที่จะ เข้าใจ.

— Jason Siefken
แหล่งที่มา

1

viz.js นั้นยอดเยี่ยมและง่ายมากไม่ใช่ว่าในปัจจุบันไม่รองรับป้ายกำกับที่เหมือน html: graphviz.org/doc/info/shapes.html#html

— SirLenz0rlot

11

สามารถลองแปลง graphviz เป็น javascript เหมือนที่ทำกับตัวอย่าง 'โปรแกรมอ่าน PDF': https://github.com/kripken/emscripten

— pedroteixeira
แหล่งที่มา

นี่คือข้อเสนอแนะที่ดีอย่างเมามัน ฉันกำลังคิดว่าจะพยายามแปลรหัสเป็น JS ด้วยตัวเอง ...... แต่เคล็ดลับ llvm นี้มันบ้ามาก!

— Armentage

ฉันเคยลองแบบนี้มาสองสามครั้งแล้ว .. emscripten ยังเด็กอยู่และเอกสารฉบับย่อ เป็นโครงการที่น่าจับตามองแน่นอนฉันเห็นได้ว่ามันให้พลังมากมายได้อย่างไร แต่ตอนนี้ถ้าคุณไม่ได้เป็นคนที่เขียนมันค่อนข้างเทอะทะ

— synthesizerpatel

8

นี่ไม่ใช่การแทนที่ graphviz แบบสำเร็จรูป แต่d3.jsเป็นไลบรารีที่สามารถทำเลย์เอาต์ต่าง ๆ จากข้อมูลที่กำหนดและจะเป็นแพลตฟอร์มที่ยอดเยี่ยมในการติดตั้ง graphviz

นี่คือตัวอย่างของรูปแบบการบังคับทิศทางซึ่งเป็นรูปแบบหนึ่งของสิ่งที่ graphviz ทำ

นี่คือคำพูดเกี่ยวกับเลย์เอาต์ที่มีสไลด์เชิงโต้ตอบที่ยอดเยี่ยมมาก

หากต้องการทำความรู้จักกับโปรเจ็กต์บทเรียนจะดีมาก

— w00t
แหล่งที่มา

1

github.com/cpettitt/dagre-d3ใช้ไดอะแกรม DOT ใน JavaScript คุณสามารถเล่นกับการสาธิตที่cpettitt.github.io/project/dagre-d3/latest/demo/...

— Arthur2e5

5

นี่คือการรวบรวมข้าม Graphviz เพื่อ Javascript ทำโดยใช้ Emscripten

https://github.com/bpartridge/graphviz.js

— พอลดิกซัน
แหล่งที่มา