@double_ming/relation v1.0.5

安装

# npm 
npm install @double_ming/relation
# yarn 
yarn add @double_ming/relation
# pnpm
pnpm add @double_ming/relation

使用

import { Graph } from "@double_ming/relation";
// element 为canvas元素
const graph = new Graph(element, {
    height: 800,
    width: 1300,
    level: 2,
})

 const nodes = [
    { 'id': 'N1', 'text': '侯亮平', 'color': '#ec6941', 'borderColor': '#ff875e' },
    { 'id': 'N2', 'text': '李达康', 'color': '#ec6941', 'borderColor': '#ff875e' },
  ]
  const lines = [
    { 'from': 'N6', 'to': 'N1', 'text': '师生', 'color': '#d2c0a5', 'fontColor': '#d2c0a5' },
    { 'from': 'N13', 'to': 'N21', 'text': '勾结', 'color': '#d2c0a5', 'fontColor': '#d2c0a5' }
]
// 第一个参数为rootId, 
graph.draw('N6', lines, nodes)

操作

• 鼠标中键平移画布
• alt + 鼠标滚轴 缩放

Graph 类方法

new 方法

// element 为canvas元素或者canvas的id
// options配置参数如下
const graph = new Graph(elementOrId, options)

draw 方法

// 第一个参数rootId代表canvas中心显示得节点id，nodes和lines分别为节点和连线
graph.draw('N6', lines, nodes)

// 重新增量更新配置 graph.update(options)

> 事件监听
```ts
// 目前仅完成click事件的触发
// 订阅click事件，当click触发时，会自动调用回调函数，同一事件可以订阅多个事件
graph.on('click', (node) => {
  alert(`当前点击节点为：${node.origin.text}`)
})
// 订阅第二个事件
graph.on('click', (node) => {
  alert('graph被点击了')
})

更新动态

• 2023/8/5 新增加graph 更新功能
• 2023/8/5 新增加连线是否为虚线，以及是否线条流动
• 2023/8/4 简了包体积
• 2023/7/31 修复了缩放时文字错位问题

options配置参数

nodes属性

lines属性