English | 简体中文
- 开箱即用的参考DEMO，可在线调试
- 全方位管理画布，开发者只需要更专注定制化的需求
- 利用dom来定制元素；灵活性，可塑性，拓展性优秀
npm install butterfly-dag
// 完全版，内部包含jquery和lodash
import {Canvas, Group, Node, Edge} from 'butterfly-dag';
import 'butterfly-dag/dist/index.css';
// 如果您引用的项目使用了jquery和lodash，为了缩小项目的体积，我们建议：
import {Canvas, Group, Node, Edge} from 'butterfly-dag/pack/index.js';
import 'butterfly-dag/pack/index.css';
const Canvas = require('butterfly-dag').Canvas;
let canvas = new Canvas({
root: dom, //canvas的根节点(必传)
zoomable: true, //可缩放(可传)
moveable: true, //可平移(可传)
draggable: true, //节点可拖动(可传)
});
canvas.draw({
groups: [], //分组信息
nodes: [], //节点信息
edges: [] // 连线信息
})
- 画布(Canvas)
- 属性配置
- 节点，线段，节点组的查看,新增,删除
- 缩放，平移
- 适配画布和聚焦局部节点
- 重做和撤销
- 坐标转换和坐标偏移
- 框选
- 事件
- 其他辅助方法
- 节点组(Group)
- 属性配置
- 自定义节点组
- 新增，删除成员节点
- 自定义锚点
- 移动
- 事件
- 节点(Node)
- 属性配置
- 自定义节点
- 自定义锚点
- 移动
- 事件
- [树状布局] 收缩 & 展开子节点
- 线(Edge)
- 属性配置
- 自定义线段
- 自定义箭头
- 自定义label
- 线段连通性
- 事件
- 线段动画
- 锚点(Endpoint)
- 属性配置
- 通用API
- 缩略图(Minimap)
- 布局(正在整理中)
cd example
npm install
npm start
小蝴蝶是一个完全开源的项目，我们欢迎大家为修复错误和改进做出贡献。有关如何开始的信息，请阅读我们的贡献指南.