G6

ภาษาอังกฤษ | 简体中文

G6: กรอบการสร้างภาพกราฟใน TypeScript

บทนำ•ตัวอย่าง•การเริ่มต้นอย่างรวดเร็ว• API

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

คุณสมบัติ

G6 เป็นเอ็นจิ้นการสร้างภาพกราฟมืออาชีพมีคุณสมบัติดังต่อไปนี้:

• องค์ประกอบที่หลากหลาย : มันมาพร้อมกับโหนดในตัว, ขอบและองค์ประกอบคอมโบ UI ที่หลากหลายพร้อมการกำหนดค่าสไตล์ที่กว้างขวางรองรับการโทรกลับข้อมูลและมีกลไกที่ยืดหยุ่นสำหรับการขยายองค์ประกอบที่กำหนดเอง
• การโต้ตอบที่สามารถควบคุมได้ : มีพฤติกรรมการโต้ตอบมากกว่า 10 ครั้งและนำเสนอเหตุการณ์มากมายที่หลากหลายทำให้การขยายตัวของพฤติกรรมการโต้ตอบแบบกำหนดเอง
• เค้าโครงประสิทธิภาพสูง : เครื่องยนต์มีเค้าโครงกราฟทั่วไปมากกว่า 10 รูปแบบซึ่งบางส่วนใช้ประโยชน์จาก GPU และการคำนวณแบบขนานที่เป็นสนิมเพื่อประสิทธิภาพที่เพิ่มขึ้นและรองรับการพัฒนาเค้าโครงแบบกำหนดเอง
• ปลั๊กอินที่สะดวกสบาย : ฟังก์ชั่นปลั๊กอินในตัวที่ปรับให้เหมาะสมและประสิทธิภาพด้วยการขยายความยืดหยุ่นทำให้ง่ายต่อการใช้ความสามารถทางธุรกิจที่กำหนดเอง
• ชุดรูปแบบและจานสีหลายชุด : มีธีมในตัวสองชุดแสงและความมืดที่รวมจานสีชุมชนยอดนิยมมากกว่า 20 ชุดตามโทนสีใหม่ของ ANTV
• การเรนเดอร์ด้านสิ่งแวดล้อมหลายครั้ง : การควบคุมพลังของ G, รองรับการเรนเดอร์ในผ้าใบ, SVG และ WebGL รวมถึงการเรนเดอร์ฝั่งเซิร์ฟเวอร์ด้วย node.js; นอกจากนี้ยังมีแพ็คเกจปลั๊กอินที่ให้การแสดงผล 3 มิติที่ทรงพลังและการโต้ตอบเชิงพื้นที่ตาม WebGL
• React Ecosystem : โดยการใช้ระบบนิเวศส่วนหน้าของ React จะรองรับโหนด React ซึ่งเพิ่มขึ้นอย่างมีนัยสำคัญในรูปแบบการนำเสนอของโหนด G6

- เริ่มต้น

G6 มักจะติดตั้งผ่านตัวจัดการแพ็คเกจเช่น NPM หรือเส้นด้าย

$ npm install @antv/g6

วัตถุ Graph สามารถนำเข้าจาก G6

 < div id =" container " > </ div > 

 import { Graph } from '@antv/g6' ;

// Get the Data.
const data = {
  nodes : [
    /* your nodes data */
  ] ,
  edges : [
    /* your edges data */
  ] ,
} ;

// Create the Graph instance.
const graph = new Graph ( {
  container : 'container' ,
  data ,
  node : {
    palette : {
      type : 'group' ,
      field : 'cluster' ,
    } ,
  } ,
  layout : {
    type : 'force' ,
  } ,
  behaviors : [ 'drag-canvas' , 'drag-node' ] ,
} ) ;

// Render the Graph.
graph . render ( ) ;

ทุกอย่างไปได้ดีคุณสามารถรับกราฟที่น่ารักต่อไปนี้ได้!

- ระบบนิเวศ

• แผนภูมิการออกแบบมด : ห้องสมุดแผนภูมิปฏิกิริยาตาม G2, G6, X6, L7
• Graphin : wrapper React แบบง่ายขึ้นอยู่กับ G6 เช่นเดียวกับ SDK สำหรับการพัฒนาแอปพลิเคชันการสร้างภาพกราฟ

สำหรับโครงการโอเพ่นซอร์สของระบบนิเวศเพิ่มเติมยินดีต้อนรับการมีส่วนร่วม โปรดอย่าลังเลที่จะส่ง PR สำหรับการรวม

- การบริจาค

• การรายงานปัญหา : หากคุณพบปัญหาใด ๆ กับ G6 ในระหว่างการใช้งานโปรดส่งปัญหาพร้อมกับรหัสตัวอย่างน้อยที่สุดที่สามารถทำซ้ำปัญหาได้
• คู่มือการบริจาค : ข้อมูลเกี่ยวกับวิธีการมีส่วนร่วมในการพัฒนาและการมีส่วนร่วมใน G6
• การอภิปรายความคิด : อภิปรายความคิดของคุณเกี่ยวกับการอภิปราย GitHub หรือในกลุ่ม Dingtalk

- ใบอนุญาต

MIT