graph-board

Một Thư Viện Vẽ Đồ Thị Bằng Javascript.

A Draw Graph Javascript Library.

Xem demo

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ị |

Donation