@double_ming/relation
TypeScript icon, indicating that this package has built-in type declarations

1.0.5 • Public • Published

社交关系图

alt relation

安装

# 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)

事件监听

// 目前仅完成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配置参数

属性 描述 类型 默认值
color 节点颜色 string #65a30d
nodeTextColor 节点文本颜色 string #fff
lineColor 连线颜色 string #16a34a
lineFontColor 连线字体颜色 string #16a34a
lineWidth 连线线宽,默认为1 number 1
borderColor 节点边框颜色 string #000
height canvas高 number 500
width canvas宽 number 500
maxScale 最小缩放 number 4
minScale 最大缩放 number 0.5
level 显示层级,默认3层 number 3
startAngle 开始角度,角度制,比如30,代表30度 number 30
radius 每一层的半径 number[] [180, 160, 140, 120]
defaultRadius 如果radius,没有设置对应层级的半径,则使用此默认半径 number 40
nodeRadius 节点半径 number 20
showLineText 是否显示节点连线的关系文字 boolean true
fontSize 文字大小 number 16
duration 动画持续时长,单位毫秒 number 2000
arrowLength 箭头长度 number 10
isDashLine 是否是虚线,默认不是 boolean false
dashPattern 虚线的模式,默认为[10, 10] number[] [10, 10]
isLineFlow 线条是否流动,默认不流动 boolean false

nodes属性

属性 描述 类型
id 节点id string | number
text 节点显示文字 string
color 节点颜色,如果配置,则替换options中配置,优先级高于options配置 string
borderColor 节点边框颜色,如果配置,则替换options中配置,优先级高于options配置 string

lines属性

属性 描述 类型
from 线起始点节点id string | number
to 线起终点节点id string | number
text 节点直接关系文字 string
color 线颜色,如果配置,则替换options中配置,优先级高于options配置 string

Package Sidebar

Install

npm i @double_ming/relation

Weekly Downloads

0

Version

1.0.5

License

MIT

Unpacked Size

78.3 kB

Total Files

7

Last publish

Collaborators

  • double_ming