graph-board
Một Thư Viện Vẽ Đồ Thị Bằng Javascript.
A Draw Graph Javascript Library.
Cách dùng cơ bản
Basic Usage
index.html
...
<div id="graph"></div>
...
import Graph from "graph-board";
// Khởi tạo đối tượng Graph
const graph = new Graph();
// Mount đồ thị vào một phần tử
graph.appendTo("#graph");
Tùy chọn
Options
Bạn có thêm một số tham số khi khởi tạo đồi tượng
Tham số | Kiểu dữ liệu | Mặc định | Mô tả |
---|---|---|---|
directed | boolean | false | Tùy chọn đồ thị có hướng hay vô hướng |
showGrid | boolean | false | Tùy chọn hiện hay ẩn lưới |
showDistance | boolean | false | Hiển thị khoảng các giữa các đỉnh |
radius | number | 20 | Bán kính của đỉnh |
Ví dụ
Example
...
const options = {
directed: true,
showGrid: true,
showDistance: true,
radius: 35,
}
const graph = new Graph(options)
graph.appendTo('#graph')
...
Thuộc tính
Properties
Tên thuộc tính | Giá trị | Cấu trúc |
---|---|---|
nodes | Danh sách chứa các đỉnh và vị trí của nó trên hệ tọa độ |
nodes : {label:number, x: number, y: number}[] |
edges | Danh sách các cung của đồ thị |
edges : {from:number, to: number}[] |
Phương thức
Methods
Tên phương thức | Tham số | Mô tả |
---|---|---|
addNode(label:number) |
label : nhãn của nút |
Thêm một nút vào đồ thị |
addEdge(from:number, to:number) |
from : đỉnh bắt đầu của cung, to : đỉnh kết thúc của cung |
Thêm một cung vào đồ thị |
appendTo(selector: string) |
selector : css-selector |
Chèn giao diện đồ họa của đồ thị vào một đối tượng DOM |
setDirected(directed: boolean) |
directed : boolean |
Đặt giá trị cho việc hiện hay ẩn hướng của đồ thị |
setShowDistance(distance: boolean) |
distance : boolean |
Đặt giá trị cho việc hiện hay ẩn khoảng cách giữa các đỉnh |
setShowGrid(showGrid: boolean) |
showGrid : boolean |
Đặt giá trị cho việc hiện hay ẩn lưới |
exportMatrix(): number[][] | Không có tham số | Trả về ma trận kề của đồ thị |
removeNode(label:number) |
label : nhãn |
Xóa một nút có nhãn label
|
removeEdge(from: number, to: number) |
from : đỉnh bắt đầu của cung, to : đỉnh kết thúc của cung |
Xóa một cung khỏi đồ thị |