Graph-board NPM

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ị