খাঁটি জাভাস্ক্রিপ্ট গ্রাফভিজের সমতুল্য [বন্ধ]

139

গ্রাফভিজ তৈরি করতে সক্ষম এমন নির্দেশিক প্রবাহ চিত্রের খাঁটি, জাভাস্ক্রিপ্ট ভিত্তিক প্রয়োগ সম্পর্কে কি কেউ সচেতন? আমি চমত্কার ভিজ্যুয়াল আউটপুটটিতে আগ্রহী নই, তবে বেজিয়ার লাইনের বিন্যাসের সাথে প্রতিটি নোডের সর্বাধিক গভীরতা নির্ধারণের জন্য গণনাগুলি যখন আপনি যখন কোনও গাছের পরিবর্তে গ্রাফের সাথে লেনদেন করছেন তখন ছেদ করার প্রান্তগুলি কমিয়ে আনতে অনুকূলিত হয়েছে তথ্য। আমি উভয় ব্রাউজারের মধ্যে এই কোডটি চালাতে চাই; আমি সচেতন যে আমি গ্রাফভিজকে আমার নোড সার্ভারে সহজেই এক্সটেনশান হিসাবে বা এম্বেড করতে পারিpopen() এটি এবং .dotবিন্যাসে গ্রাফের তথ্য প্রবাহিত করতে পারি ।

রেফারেন্সের জন্য, এখানে একটি সাধারণ গ্রাফভিজ আউটপুট। সংযোগকারী রেখাগুলি ছেদ না করে (খুব ঘন ঘন) বা নোডের মধ্য দিয়ে যাওয়া ছাড়াই কীভাবে উপাদানগুলি স্ট্যাক করা এবং ব্যবধানে নোডগুলির মধ্যে ভ্রমণের অনুমতি দেয় তা নোট করুন।

এখানে চিত্র বর্ণনা লিখুন

javascript  graphviz 
— Armentage
সূত্র
আমরা যারা গ্রাফভিজের সাথে পরিচিত নই তাদের জন্য কি এই জাতীয় চিত্রের উদাহরণ রয়েছে?
— ম্যাট বল
— ড্যানিয়েল প্রাইডেন
3
হতে পারে - এটি চেক আউট। প্রচুর মন্তব্য এবং প্রতিক্রিয়াগুলি চার্টিংয়ের সরঞ্জামগুলিতে ইঙ্গিত করছে যা গ্রাফভিজের মতো মোটেও কিছুই নয়, বা কেবল গ্রাফভিজ আউটপুট অঙ্কন করতে সক্ষম তবে তারা নিজেই বিন্যাসটি করতে পারে না।
— আর্মেন্টেজ

উত্তর:

84

.ডট ক্যানভাস রেন্ডারারের এই খাঁটি জাভাস্ক্রিপ্ট প্রয়োগটি একবার দেখুন:

http://ushiroad.com/jsviz/

গ্রন্থাগারটি নথিভুক্ত নয় - লেখকের অবশ্যই এটি আরও প্রচার এবং ডকুমেন্ট করা উচিত (আমি তাকে কমপক্ষে গিথুবে রাখার পরামর্শ দেওয়ার জন্য তার সাথে যোগাযোগ করব)।

আপডেট : কোডটি গিথুবে ঠেলে দেওয়া হয়েছে: https://github.com/gyuque/livizjs

আপডেট (14/2/2013) : অন্য প্রতিযোগী উঠেছে! বিষয়ে আগ্রহী কেহ স্পষ্টভাবে Viz.js এর কটাক্ষপাত করা উচিত উদাহরণস্বরূপ পৃষ্ঠা এবং GitHub রেপো ।

আপডেট (7/16/2020) : (সাত বছর পরে) http://webographicviz.com/ এছাড়াও দুর্দান্ত! :-)

— গ্রেগ সাদেস্কি
সূত্র
1
এই প্রকল্পটি আশ্চর্যজনক দেখাচ্ছে এবং সম্ভবত আমি যা দেখেছি তার মধ্যে এটি সর্বোত্তম সমাধান তবে এটি কীভাবে এটি ব্যবহার করবেন তা নির্ধারণের জন্য উত্সটিতে কিছুটা খনন অবশ্যই হবে। কোডটি যদিও বেশ যুক্তিসঙ্গত বলে মনে হচ্ছে, সুতরাং এটি এতটা খারাপ নাও হতে পারে।
— captncraig
এখনও অবধি, আমি মূল প্রশ্নের মধ্যে যা খুঁজছিলাম তার সবচেয়ে কাছের এটি। এটি কেবল কোনও রেন্ডারার নয়, এটি নির্দেশিত গ্রাফটিও কীভাবে গণনা করতে হয় তা জানে। এটি কোথাও একটি ব্যাকএন্ডে ডট চালাচ্ছে বা পুরো ব্রাফ প্রজন্মের অ্যালগরিদমটি আমার ব্রাউজারে চলছে?
— আর্মেন্টেজ
1
@ আরমেন্টেজ, এটি পুরোপুরি আপনার ব্রাউজারে চলছে। Graphviz জাভাস্ক্রিপ্ট কম্পাইল করা হয়েছে, ধন্যবাদ emscripten । উত্স কোডটি যদিও এটি হতে পারে ঠিক তেমন নথিভুক্ত নয়, এখন ভাগ্যক্রমে (টুইটার এবং ই-মেইলে লেখককে কড়া নাড়ানোর পরে) ;-) এখানে উপলব্ধ । প্রকল্পটি ফোরক করা এবং এর জন্য সহজেই ব্যবহারযোগ্য এপিআই তৈরি করা প্রথম দুর্দান্ত পদক্ষেপ হবে ..!
— গ্রেগ সাদেটস্কি
5
প্রার্থীদের তালিকায় কেবল গ্রাফ ড্রাকুলার লাইব্রেরি যুক্ত করতে চেয়েছিলেন । আপনি এখানে একটি ডেমো দেখতে পারেন । এটি গ্রাফটি গণনা করে এবং এটি প্রদর্শন করে ( রাফেল ব্যবহার করে ); কোডটি সংক্ষিপ্ত এবং পরিষ্কার।
— গ্রেগ সাদেটস্কি
লিভিজস একটি দুর্দান্ত সরঞ্জাম, তবে নোট করুন যে এটি সম্পূর্ণ ভাষা যেমন 'ক্লাস্টার্স' সমর্থন করে না
— স্যারলেনজ0rlot
37

অনেক দূরে অনুসন্ধানের পরে অবশেষে উত্তরটি খুঁজে পেলাম।

সমাধানটি ছিল যে কেউ এলভিএম + ইমস্প্রিপ্ট ব্যবহার করে গ্রাভিজকে জাভাস্ক্রিপ্টে সংকলন করেছেন। লিঙ্কটি এখানে:

http://viz-js.com/

উত্সটি পাওয়া যাবে: https://github.com/mdaines/viz.js এ

এবং কেবল একটি ওয়েবপৃষ্ঠা ব্যবহার করতে:

var graphviz_text = ...;
document.body.innerHTML += Viz(graphviz_text, "svg");
— জাচারি ভোর্হিস
সূত্র
আমি এটিও ঠিক ঠিক
— খুঁজছিলাম
6
আপডেট: আমি একটি ডেমো সাইট তৈরি করে দেখিয়েছি যে viz.js এ হুকিং করা কীভাবে মজাদার এবং সহজ! এটি www.webographicviz.com এ দেখুন
— জ্যাচারি ভোর্হিস
প্রদত্ত গিথুব লিঙ্কগুলি ভাঙা হয়েছে
— জাইমে
2
— সোমু
19

সমস্ত বিকল্পগুলি দেখার পরে, আমি পেয়েছিলাম viz.js ( https://github.com/mdaines/viz.js/ ) ভিত্তিক jsviz এবং গ্রাফিকভিজ.জেএস ভিত্তিক একটি ওয়েবপৃষ্ঠা থেকে একটি API ব্যবহারযোগ্য, এবং এর জন্য যথেষ্ট উদাহরণ রয়েছে বোঝা.

— জেসন সিফকেন
সূত্র
1
viz.js দুর্দান্ত এবং খুব সহজ, এটি বর্তমানে এইচটিএমএল-জাতীয় লেবেল সমর্থন করে না: গ্রাফভিজ.আর
— ডক
11

গ্রাফভিজকে জাভাস্ক্রিপ্টে রূপান্তর করার চেষ্টা করা যেতে পারে, যেমন এটি 'পিডিএফ রিডার'-এর উদাহরণস্বরূপ করা হয়েছিল: https://github.com/kripken/emscriptten

— pedroteixeira
সূত্র
এটি একটি অত্যন্ত উত্সাহী পরামর্শ। আমি নিজেই কোডটি জেএসে অনুবাদ করার চেষ্টা করার কথা ভাবছিলাম ...... তবে এই এলভিএম ট্রিকটি সুন্দর পাগলামি!
— আর্মেন্টেজ
আমি এটিকে এখনও পর্যন্ত একটি দম্পতি চেষ্টা করে দেখেছি .. এমস্ক্রিপ্টেন এখনও বেশ অল্প বয়স্ক, এবং ডকুমেন্টেশন সংক্ষিপ্ত। অবশ্যই দেখার জন্য দুর্দান্ত একটি প্রকল্প, আমি দেখতে পাচ্ছি এটি কীভাবে প্রচুর শক্তি সরবরাহ করতে পারে। তবে এই মুহুর্তে আপনি যদি সেই লোক না হন তবে যিনি এটি লিখেছিলেন এটি কিছুটা অস্বাস্থ্যকর।
— সিন্থেসাইজারপেটেল
8

এটি রেডিমেড গ্রাফভিজ প্রতিস্থাপন নয় তবে ডি 3 জেএস একটি লাইব্রেরি যা প্রদত্ত ডেটা থেকে বিভিন্ন বিন্যাস করতে পারে এবং গ্রাফভিজ প্রয়োগের জন্য একটি দুর্দান্ত প্ল্যাটফর্ম হতে পারে।

এখানে বল-নির্দেশিত বিন্যাসগুলির উদাহরণ যা গ্রাভিভিজ কী করে তার এক রূপ।

অত্যন্ত বিস্ময়কর ইন্টারেক্টিভ স্লাইডগুলির সাথে লেআউটগুলি সম্পর্কে এখানে একটি বক্তব্য রয়েছে ।

প্রকল্পটি জানতে, টিউটোরিয়ালগুলি খুব ভাল।

— w00t
সূত্র
1
github.com/cpettitt/dagre-d3 জাভাস্ক্রিপ্টে ডট ডায়াগ্রাম প্রয়োগ করে। আপনি cpettitt.github.io/project/dagre-d3/latest/demo/… এ ডেমোটির সাথে খেলতে পারেন ।
— আর্থার 2e5
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.