জাভাস্ক্রিপ্টে গ্রাফ ভিজ্যুয়ালাইজেশন লাইব্রেরি


523

আমার কাছে একটি ডেটা কাঠামো রয়েছে যা একটি নির্দেশিত গ্রাফকে উপস্থাপন করে এবং আমি এটি একটি HTML পৃষ্ঠায় গতিশীলভাবে রেন্ডার করতে চাই। এই গ্রাফগুলি সাধারণত কয়েকটি নোডের হতে পারে, খুব উপরের প্রান্তে দশটি হতে পারে, তাই আমার অনুমান যে পারফরম্যান্স বড় চুক্তি হতে চলেছে না। আদর্শভাবে, আমি এটিকে jQuery এর সাথে সংযুক্ত করতে সক্ষম হতে চাই যাতে ব্যবহারকারীরা চারদিকে নোডগুলি টেনে এনে ম্যানুয়ালি লেআউটটিকে ঝাঁকুন করতে পারে।

দ্রষ্টব্য: আমি কোনও চার্টিং লাইব্রেরি খুঁজছি না।


উত্তর:


922

আপনি যা খুঁজছেন তা আমি কেবল একসাথে রেখেছি: http://www.graphdracula.net

এটি নির্দেশিত গ্রাফ বিন্যাস, এসভিজি সহ জাভাস্ক্রিপ্ট এবং আপনি এমনকি নোডগুলি প্রায় টেনে আনতে পারেন। এখনও কিছু টুইট করার প্রয়োজন, তবে এটি সম্পূর্ণ ব্যবহারযোগ্য। আপনি এই জাতীয় জাভাস্ক্রিপ্ট কোড সহ সহজে নোড এবং প্রান্ত তৈরি করুন:

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

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


আপনি অন্য প্রকল্পগুলিও একবার দেখতে চান! নীচে দুটি মেটা-তুলনা করা হল:

  • সোস্যালকম্পারে গ্রন্থাগারের একটি বিস্তৃত তালিকা রয়েছে এবং গ্রাফিক ভিজ্যুয়ালাইজেশনগুলির জন্য "নোড / এজ গ্রাফ" লাইনটি ফিল্টার করবে।

  • ডেটাভিজুয়ালাইজেশন.চ নোড / গ্রাফ সহ অনেকগুলি লাইব্রেরি মূল্যায়ন করেছে। দুর্ভাগ্যক্রমে কোনও সরাসরি লিঙ্ক নেই তাই আপনাকে "গ্রাফ" এর জন্য ফিল্টার করতে হবে:নির্বাচন ডেটাভিজুয়ালাইজেশন

এখানে অনুরূপ প্রকল্পগুলির একটি তালিকা রয়েছে (কিছু এখানে ইতিমধ্যে উল্লেখ করা হয়েছে):

খাঁটি জাভাস্ক্রিপ্ট লাইব্রেরি

  • vis.js অনেক ধরণের নেটওয়ার্ক / এজ গ্রাফ, প্লাস টাইমলাইন এবং 2 ডি / 3 ডি চার্ট সমর্থন করে। স্বয়ং-লেআউট, স্বয়ংক্রিয় ক্লাস্টারিং, তুলতুলে পদার্থবিদ্যা ইঞ্জিন, মোবাইল উপযোগী, কীবোর্ড নেভিগেশন, হায়ারারকিকাল বিন্যাস, অ্যানিমেশন ইত্যাদি MIT- র লাইসেন্সপ্রাপ্ত এবং ডাচ স্ব-সংগঠিত নেটওয়ার্কের উপর গবেষণা বিশেষজ্ঞ দৃঢ় দ্বারা উন্নত।

  • সাইটোস্কেপ.জেএস - জেকুয়ারি সম্মেলনগুলি অনুসরণ করে মোবাইল সমর্থন সহ ইন্টারেক্টিভ গ্রাফ বিশ্লেষণ এবং ভিজ্যুয়ালাইজেশন। এনআইএইচ অনুদানের মাধ্যমে অর্থায়িত এবং @maxkfranz দ্বারা নির্মিত ( নীচে তার উত্তর দেখুন ) বেশ কয়েকটি বিশ্ববিদ্যালয় এবং অন্যান্য সংস্থার সহায়তায়।

  • জাভাস্ক্রিপ্ট ইনফোভিস টুলকিট - জিত, একটি ইন্টারেক্টিভ, বহু-উদ্দেশ্যমূলক গ্রাফ অঙ্কন এবং বিন্যাস কাঠামো। উদাহরণস্বরূপ হাইপারবোলিক ট্রি দেখুন । টুইটার dataviz স্থপতি দ্বারা নির্মিত নিকোলাস গার্সিয়া মধ্যে Belmonte এবং সেঞ্চা দ্বারা কেনা 2010 সালে।

  • ডি 3.জেএস প্রোটোভিসের উত্তরসূরির শক্তিশালী বহু-উদ্দেশ্যমূলক জেএস ভিজ্যুয়ালাইজেশন লাইব্রেরি। দেখুন জোর নির্দেশ গ্রাফ উদাহরণ এবং অন্যান্য গ্রাফ উদাহরণ গ্যালারি

  • প্লটলির জেএস ভিজুয়ালাইজেশন লাইব্রেরিতে জেএস, পাইথন, আর, এবং ম্যাটল্যাব বাইন্ডিংগুলির সাথে ডি 3.জে ব্যবহার করে। IPython একটি nexworkx উদাহরণ দেখুন এখানে , মানুষের মিথস্ক্রিয়া উদাহরণ এখানে , এবং জাতীয় এম্বেড এপিআই

  • sigma.js গ্রাফ আঁকার জন্য লাইটওয়েট তবে শক্তিশালী লাইব্রেরি

  • ইন্টারেক্টিভ সংযুক্ত গ্রাফ তৈরির জন্য jsPlumb jQuery প্লাগ-ইন

  • স্প্রিংই - একটি বল-নির্দেশিত গ্রাফ বিন্যাস অ্যালগরিদম

  • প্রসেসিং। জেএস রেস দ্বারা প্রসেসিং লাইব্রেরির জাভাস্ক্রিপ্ট বন্দর

  • জেএস গ্রাফ এটি - সরলরেখাগুলিতে সংযোগযুক্ত ড্রাগগুলি টানুন n লাইনগুলির ন্যূনতম স্বয়ংক্রিয় বিন্যাস।

  • রাফেলজেএসের গ্রাফল - জেনেরিক বহু-উদ্দেশ্য ভেক্টর অঙ্কন গ্রন্থাগারের ইন্টারেক্টিভ গ্রাফ উদাহরণ। রাফেলজেএস স্বয়ংক্রিয়ভাবে নোডগুলি বিন্যাস করতে পারে না; এর জন্য আপনার আর একটি লাইব্রেরি লাগবে।

  • জয়েন্টজেএস কোর - ডেভিড ডুরম্যানের এমপিএল-লাইসেন্সযুক্ত ওপেন সোর্স ডায়াগ্রামিং লাইব্রেরি। এটি স্ট্যাটিক ডায়াগ্রাম বা সম্পূর্ণ ইন্টারেক্টিভ ডায়াগ্রামিং সরঞ্জাম এবং অ্যাপ্লিকেশন বিল্ডার তৈরি করতে ব্যবহার করা যেতে পারে। এসভিজি সমর্থনকারী ব্রাউজারগুলিতে কাজ করে। মূল প্যাকেজটিতে লেআউট অ্যালগরিদম অন্তর্ভুক্ত নেই

  • এমএক্সগ্রাফ আগে বাণিজ্যিক এইচটিএমএল 5 ডায়াগ্রামিং লাইব্রেরি, এখন অ্যাপাচি ভি 2.0 এর অধীনে উপলব্ধ। mxGraph ব্যবহৃত বেস লাইব্রেরি draw.io

বাণিজ্যিক গ্রন্থাগারগুলি

পরিত্যক্ত লাইব্রেরি

  • সাইটোস্কেপ ওয়েব এম্বেডেবল জেএস নেটওয়ার্কের ভিউয়ার (কোনও নতুন বৈশিষ্ট্য পরিকল্পনা করা হয়নি; সাইটোস্কেপ.জেএস দ্বারা সফল)

  • গ্রাভিজ গ্রাফের জন্য ক্যানভিজ জেএস রেন্ডারার । ২০১৩ সালের সেপ্টেম্বরে পরিত্যক্ত

  • arbor.js সুন্দর পদার্থবিজ্ঞান এবং চক্ষু-ক্যান্ডির সাথে পরিশীলিত গ্রাফিং। মে মাসে পরিত্যক্ত 2012 বেশ কিছু আধা বজায় কাটাচামচ বিদ্যমান।

  • jssvgographic "সহজতম সম্ভাব্য শক্তি নির্দেশিত গ্রাফ লেআউট অ্যালগরিদম জাভাস্ক্রিপ্ট লাইব্রেরি হিসাবে প্রয়োগ করা হয়েছে যা এসভিজি অবজেক্ট ব্যবহার করে"। 2012 সালে পরিত্যক্ত।

  • jsdot ক্লায়েন্ট সাইড গ্রাফ অঙ্কন অ্যাপ্লিকেশন। ২০১১ সালে পরিত্যক্ত

  • ভিজ্যুয়ালাইজেশনের জন্য প্রোটোভিস গ্রাফিকাল টুলকিট (জাভাস্ক্রিপ্ট)। ডি 3 দ্বারা প্রতিস্থাপিত হয়েছে।

  • সংযোগ এবং সম্পর্কের জন্য মু চাকা ইন্টারেক্টিভ জেএস প্রতিনিধিত্ব (২০০৮)

  • জেএসভিজ ২০০ 2007-এর গ্রাফ ভিজ্যুয়ালাইজেশন স্ক্রিপ্ট

  • জাভাস্ক্রিপ্টের জন্য ডাগ্রে গ্রাফ বিন্যাস

নন জাভাস্ক্রিপ্ট লাইব্রেরি


4
হ্যাঁ, নির্দেশিত প্রান্তগুলি সম্ভব! G.addEdge ("চেরি", "আপেল", directed "পরিচালিত": সত্য}) ব্যবহার করুন;
জোহান ফিলিপ স্ট্র্যাথাউসেন

চার্ট.জেএস এবং চার্টনিউ.জেএস লাইব্রেরি যুক্ত করতে হবে। এবং এটি ( Charts.livegap.com ) এর জন্য উত্পাদিত হয়েছে
ওমর সেদকি

1
আরও দুটি উল্লেখযোগ্য গ্রন্থাগার রয়েছে যা তালিকায় যুক্ত হতে পারে, নাম লিংকুরিয়াস.জেএস এবং ভিভাগ্রাফজেএস
asukasz K

2
YFILES লেআউট অ্যালগরিদমের জন্য কি কোনও ওপেন সোর্স বিকল্প আছে? যেমন yworks.com/products/yfiles-layout-algorithms-for-cytoscape
রায়ান চৌ চৌ

1
আমি একটি নিখরচায় এবং হালকা ওজনের লাইব্রেরি তৈরি করেছি যা অন্যের পক্ষে কার্যকর হতে পারে: github.com/n-yousefi/Arg- গ্রাফ
নাসের ইউসেফি

48

দাবি অস্বীকার: আমি সাইটোস্কেপ.জেএস এর বিকাশকারী

সাইটোস্কেপ.জেএসএস একটি HTML5 গ্রাফ ভিজ্যুয়ালাইজেশন লাইব্রেরি। এপিআই পরিশীলিত এবং jQuery কনভেনশনগুলি অনুসরণ করে

  • অনুসন্ধান এবং ফিল্টারিংয়ের জন্য নির্বাচক ( cy.elements("node[weight >= 50].someClass")আপনার প্রত্যাশার চেয়ে অনেক বেশি),
  • শৃঙ্খল (যেমন cy.nodes().unselect().trigger("mycustomevent")),
  • ইভেন্টগুলিতে আবদ্ধ হওয়ার জন্য jQuery- জাতীয় ফাংশন,
  • সংগ্রহ হিসাবে উপাদানগুলি (যেমন jQuery এর এইচটিএমএল ডোম উপাদানসমূহের সংগ্রহ রয়েছে),
  • এক্সটেনসিবিলিটি (কাস্টম লেআউট, ইউআই, কোর এবং সংগ্রহ ফাংশন এবং আরও কিছু যোগ করতে পারে),
  • এবং আরও।

আপনি যদি গ্রাফগুলি সহ কোনও গুরুতর ওয়েব অ্যাপ তৈরির বিষয়ে চিন্তাভাবনা করেন তবে আপনার কমপক্ষে Cytoscape.js বিবেচনা করা উচিত। এটি নিখরচায় এবং মুক্ত উত্স:

http://js.cytoscape.org


6
সমস্ত API গুলি সম্পূর্ণ নথিভুক্ত। ডকগুলি এমনকি শুরু করার আগেই আপনাকে পদক্ষেপ দেয় (অর্থাত্ init)। আছে এছাড়াও পৃথক API গুলির জন্য চলমান উদাহরণ, এবং সেখানে লাইভ গণদেবতা আছে। কার্যকারিতা যেকোন জেএস গ্রাফের চেয়ে অনেক উপরে এবং ডকসই বেশিরভাগ প্রকল্পের চেয়ে বেশি বিস্তৃত - বাণিজ্যিক হোক না কেন ওপেনসোর্স। ডক্সে আপনার জন্য ঠিক কী অভাব রয়েছে?
ম্যাক্সফ্রানজ

3
ঠিক আছে, দুঃখিত আমার খারাপ। আমি ঠিক মতো দেখিনি। হ্যাঁ এটি ভাল নথিভুক্ত।
ঝড়

শ্রেণিবদ্ধ ক্রমে গ্রাফগুলি বিন্যাস করার কোনও উপায় আছে (গাছের মতো দেখতে একটি বিন্যাস তবে এটি আসলে একটি গ্রাফ, যার অর্থ একাধিক পিতামাতার সাথে নোড রয়েছে)
মিনা

দাগ্রে এবং প্রশস্ততা উভয় লেআউটই এই ক্ষেত্রে কাজ করে
ম্যাক্সফ্রান্স

আমাকে তীরের ড্রাগ'আরড্রপ শুরু এবং শেষ প্রান্ত দিয়ে গ্রাফটি সম্পাদনা করতে হবে। এই গ্রন্থাগারটি বলে যে এই জিনিসগুলি অপরিবর্তনীয়। সুতরাং আমার অন্য লাইব্রেরির সন্ধান করা দরকার ...
ইউজিন গ্র। ফিলিপভ

35

জেভিভিস বেশ সুন্দর ছিল, তবে বৃহত্তর গ্রাফগুলির সাথে ধীর ছিল এবং 2007 সাল থেকে এটি পরিত্যক্ত ছিল।

জাফায় সমৃদ্ধ ইন্টারেক্টিভ ডেটা ভিজ্যুয়ালাইজেশন তৈরির জন্য প্রিফিউস হল সফ্টওয়্যার সরঞ্জামগুলির একটি সেট। অ্যাডোব ফ্ল্যাশ প্লেয়ারে চলমান ভিজ্যুয়ালাইজেশন তৈরির জন্য ফ্লেয়ার একটি অ্যাকশনস্ক্রিপ্ট লাইব্রেরি, ২০১২ সাল থেকে পরিত্যক্ত।


2
এই লাইব্রেরিগুলি এই মুহুর্তে কিছুটা পুরানো বলে মনে হচ্ছে, লোকেরা আজ কী ব্যবহার করছে? আমি বিশেষত স্বাধীন xy সিরিজের প্লট করতে চাইছি।
ব্লু

22
-1 - প্রিফিউজ জাভা, না জাভাস্ক্রিপ্ট। ফ্লেয়ারটি ফ্ল্যাশ, এটি জাভাস্ক্রিপ্টও নয়। জেএসভিআইএস বগি এবং পুরানো।
অ্যানাটোলি টেকটোনিক

2
@ অ্যানিমুসন: আর একটি অফ-টপিক: ওপি জাভাস্ক্রিপ্ট লাইব্রেরি চেয়েছিল। শুধুমাত্র উত্তর জাতীয় সম্পর্কে অংশ একটি লাইব্রেরি যে 2007 সাল থেকে উন্নত হয়নি
ড্যান Dascalescu

10

বাণিজ্যিক দৃশ্যে, নিশ্চিতভাবেই গুরুতর প্রতিযোগী হ'ল এইচটিএমএলের জন্য ওয়াইফাইলস :

আপনি উত্তর দিবেন না আপনি উত্তর দিবেন না:

  • কাস্টম ডেটার সহজ আমদানি ( এই ইন্টারঅ্যাকটিভ অনলাইন ডেমোটি দেখতে অনেকটাই ঠিক ওপি যা খুঁজছিল তা দেখে মনে হচ্ছে)
  • ব্যবহারকারীর অঙ্গভঙ্গির মাধ্যমে চিত্রগুলি তৈরি এবং পরিচালনা করার জন্য ইন্টারেক্টিভ সম্পাদনা (সম্পূর্ণ সম্পাদক দেখুন )
  • গ্রন্থাগারের প্রতিটি এবং প্রতিটি দিক কাস্টমাইজ করার জন্য একটি বিশাল প্রোগ্রামিং এপিআই
  • গ্রুপিংয়ের জন্য সমর্থন এবং বাসা বাঁধার (উভয় ইন্টারেক্টিভ পাশাপাশি পাশাপাশি লেআউট অ্যালগরিদমের মাধ্যমে)
  • কোনও স্পেসফিক ইউআই টুলকিটের উপর নির্ভর করে না তবে প্রায় বিদ্যমান জাভাস্ক্রিপ্ট টুলকিটটিতে একীকরণকে সমর্থন করে (দেখুন দেখুন) "একীকরণ" গণদেবতা )
  • স্বয়ংক্রিয় বিন্যাস (বিভিন্ন শৈলী, যেমন "শ্রেণিবিন্যাস", "জৈব", "অর্থোগোনাল", "ট্রি", "বিজ্ঞপ্তি", "রেডিয়াল" এবং আরও অনেক কিছু)
  • স্বয়ংক্রিয় পরিশীলিত প্রান্তের রাউটিং (বাধা এড়ানোর সাথে অরথগোনাল এবং জৈব প্রান্তের রাউটিং)
  • বর্ধনশীল এবং আংশিক বিন্যাস (উপাদানগুলি যুক্ত করা এবং অপসারণ এবং কেবল চিত্রের বাকী অংশটি কিছুটা পরিবর্তন করা যায় না)
  • গোষ্ঠীকরণ এবং বাসা বাঁধার জন্য সমর্থন (উভয় ইন্টারেক্টিভ পাশাপাশি পাশাপাশি লেআউট অ্যালগরিদমের মাধ্যমে)
  • গ্রাফ বিশ্লেষণ অ্যালগরিদমের প্রয়োগ (পথ, কেন্দ্রিকতা, নেটওয়ার্ক প্রবাহ ইত্যাদি)
  • এসভিজি + সিএসএস এবং ক্যানভাসের মতো এইচটিএমএল 5 প্রযুক্তি ব্যবহার করে এবং আধুনিক জাভাস্ক্রিপ্ট লিভারেজিং বৈশিষ্ট্য এবং অন্যান্য আরও ES5 এবং ES6 বৈশিষ্ট্য (তবে একই কারণে IE সংস্করণ 8 এবং তার চেয়ে কম চলবে না)।
  • একটি মডুলার এপিআই ব্যবহার করে যা ইউএমডি লোডার ব্যবহার করে অন-ডিমান্ড লোড করা যায়

এখানে একটি নমুনা রেন্ডারিং দেওয়া হয়েছে যা বেশিরভাগ অনুরোধ করা বৈশিষ্ট্যগুলি দেখায়:

বিপিএমএন ডেমো দ্বারা নির্মিত একটি নমুনা রেন্ডারিংয়ের স্ক্রিনশট।

সম্পূর্ণ প্রকাশ: আমি yWorks এর জন্য কাজ করি তবে স্ট্যাকওভারফ্লোতে আমি আমার নিয়োগকর্তাকে উপস্থাপন করি না।


3
অ্যালগরিদমগুলির সর্বোত্তম সংগ্রহ, তবে সর্বাধিক বন্ধ, ওপেন সোর্স প্রকল্পগুলিতে এটি ব্যবহার করা অসম্ভব করে তোলে :-(
ফরেস্টো

1
"সেরা সংগ্রহ" সম্ভবত সত্য, তবে "সর্বাধিক বন্ধ" আপেক্ষিক, এবং "অসম্ভব" ভুল: এটি একটি বাণিজ্যিক লাইসেন্স, যাতে ওপেন-সোর্স প্রকল্পটি ভাইরাল লাইসেন্স ব্যবহার না করে , এটি ওপেন-সোর্স প্রকল্পগুলিতে ব্যবহার করা যেতে পারে। অবশ্যই অন্যান্য ওপেন সোর্স প্রকল্পগুলিতে ওপেন-সোর্স প্রকল্পগুলি ব্যবহার করা কম সমস্যাযুক্ত ...
সেবাস্তিয়ান

1
ওপেন সোর্স কীভাবে কাজ করে তা আপনি বুঝতে পারেন নি। আপনি কি বলছেন যে আপনার সংস্থা একটি মুক্ত-উত্স প্রকল্পটি অসীম বিকাশকারীদের জন্য এই সফ্টওয়্যারটি ব্যবহারের অধিকারকে, একটি নির্দিষ্ট, এককালীন ব্যয়ের জন্য অসীম বিকাশকারী এবং অবদানকারী এবং পরীক্ষকদের এ বিতরণের অধিকার মঞ্জুর করতে পারে? অবশ্যই না
ফলিক্স সাপরেলি

2
@ ফালিক্সসাপারেলি: বিশ্বাস করুন: আমি করি। আপনি যা বর্ণনা করেছেন তা সম্ভব এবং অনুরূপ জিনিসগুলি আগেও করা হয়ে গেছে। আপনি স্ট্যান্ডার্ড লাইসেন্স শর্তগুলির সাথে লিঙ্ক করছেন, তবে অবশ্যই কাস্টম চুক্তিগুলি সম্ভব এবং এর আগেও করা হয়েছিল। যদিও এটি নিয়ে আলোচনা করার জন্য এটি সঠিক জায়গা নয়। YWorks সরাসরি যোগাযোগ করতে নির্দ্বিধায়।
সেবাস্তিয়ান

7

গুরুজ যেমন উল্লেখ করেছেন, জেআইটি বেশ RGraph এবং HyperTree দৃশ্য মর্মস্পর্শী সহ বিভিন্ন সুদৃশ্য গ্রাফ / গাছ বিন্যাস, হয়েছে।

এছাড়াও, আমি গিথুবে একটি সুপার সাধারণ এসভিজি-ভিত্তিক বাস্তবায়ন স্থাপন করেছি (কোনও নির্ভরতা নেই, L 125 এলওসি) যা আধুনিক ব্রাউজারগুলিতে প্রদর্শিত ছোট গ্রাফগুলির জন্য যথেষ্ট ভাল কাজ করা উচিত।

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.