butterfly vue3 关系图

已于 2023-02-23 14:31:58 修改
阅读量1.5k 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： vue3 butterfly js 文章标签： javascript 前端 vue.js
于 2023-02-23 10:16:43 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/xujing_06/article/details/129175826
该博客展示了如何在Vue3项目中利用butterfly-dag库创建一个关系图组件。通过引用必要的依赖和设置配置，实现可拖动、可放大缩小、可删除连线的关系图，并提供了自定义节点和边的样式。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

index.vue

<div className="compact-box-tree-page">

<div className="compact-box-tree-canvas" ref="buildCore"></div>

</div>

<script lang="ts">

import { defineComponent, ref, watch, onMounted } from 'vue';

import { mockData } from './config';

import { TreeCanvas } from 'butterfly-dag';

import 'butterfly-dag/dist/index.css';

export default defineComponent({

name: 'Butterfly',

components: {},

setup() {

const buildCore = ref<HTMLDivElement | null>(null);

let canvas: any = null;

onMounted(() => {

if (buildCore.value != null) {

canvas = new TreeCanvas({

root: buildCore.value,

disLinkable: true, // 可删除连线

linkable: true, // 可连线

draggable: true, // 可拖动

zoomable: true, // 可放大

moveable: true, // 可平移

theme: {

edge: {

shapeType: 'Manhattan',

arrow: true,

},

},

layout: {

type: 'compactBox',

options: {

direction: 'TB',

getHeight(d: any) {

return 60;

},

getWidth(d: any) {

return 120;

},

getHGap(d: any) {

return 20;

},

getVGap(d: any) {

return 80;

},

},

},

});

canvas.draw(mockData, {}, () => {

canvas.focusCenterWithAnimate();

});

}

});

const data = ref(mockData);

watch(

() => data,

() => {

canvas.draw(mockData, {}, () => {

canvas.focusCenterWithAnimate();

});

},

);

return {

buildCore,

};

},

});

</script>

<style lang="less">

@butterfly-theme-color-base: #fff;

@butterfly-normal-font-color-base: #222;

@butterfly-overlay-font-color-base: #fff;

@butterfly-primary-color-base: #f66902;

@butterfly-box-border-color-base: #d9d9d9;

@butterfly-box-shadow-base:0 2px 3px 0 rgba(0,112,204,0.06);

@butterfly-box-radius-base: 100px;

@butterfly-line-color-base: #bfbfbf;

// 主题背景色（画布背景色）

@butterfly-theme-background-color: @butterfly-theme-color-base;

// （各图形框）普通情况背景色

@butterfly-theme-color: fade(@butterfly-theme-color-base, 80%);

// 主题色

@butterfly-primary-color: @butterfly-primary-color-base;

// 普通情况下字体颜色

@butterfly-normal-font-color: @butterfly-normal-font-color-base;

// 主题背景色上的字体颜色及icon颜色

@butterfly-overlay-font-color: @butterfly-overlay-font-color-base;

// 拖动时的背景色

@butterfly-box-move-background-color: fade(@butterfly-primary-color, 20%);

// 边框的样式

@butterfly-box-border: 1px solid @butterfly-box-border-color-base;

@butterfly-box-shadow: @butterfly-box-shadow-base;

@butterfly-box-radius: @butterfly-box-radius-base;

@butterfly-box-node-border-hover: 1px solid @butterfly-primary-color;

// 线条样式

@butterfly-line-color: @butterfly-line-color-base;

.iot-node {

position: absolute;

width: 110px;

height: 64px;

.title {

width: 100%;

height: 100%;

line-height: 64px;

text-align: center;

background: @butterfly-primary-color;

border-radius: 0 0 8.04px 8.04px;

}

/* .content {

height: 32px;

padding: 0 8px;

color: @butterfly-normal-font-color;

font-size: 12px;

line-height: 32px;

text-align: center;

background: @butterfly-theme-color;

border: @butterfly-box-border;

border-radius: 0 0 8.04px 8.04px;

}*/

.expand-btn {

position: absolute;

bottom: -17px;

left: 46px;

width: 20px;

height: 10px;

line-height: 8px;

text-align: center;

background: @butterfly-theme-color;

border: @butterfly-box-border;

border-radius: 4px;

box-shadow: @butterfly-box-shadow;

cursor: pointer;

}

.expand-btn:hover {

border: @butterfly-box-node-border-hover;

border-radius: 5px;

}

}

.compact-box-tree-page {

width: 100%;

height: 100%;

.compact-box-tree-canvas {

width: 100%;

height: 100%;

}

.butterfly-wrapper {

position: relative;

}

.text-box {

position: absolute;

top: -45px;

left: 0;

display: inline-block;

width: 100%;

height: 30px;

padding: 0 10px;

font-size: 12px;

line-height: 30px;

text-align: center;

// background-color: pink;

}

.label {

position: absolute;

display: inline-block;

width: 80px;

height: 28px;

padding: 4px;

color: @butterfly-primary-color;

text-align: center;

//background: @butterfly-theme-color;

}

}

</style>

node.js

import $ from 'jquery';

import { TreeNode } from 'butterfly-dag';

//import dd from './../../../assets/imgs/kai.png';

class BaseNode extends TreeNode {

draw = opts => {

let container = $('<div class="iot-node"></div>')

.css('top', opts.top + 'px')

.css('left', opts.left + 'px')

.attr('id', opts.id);

let titleDom = $(

// `<div class="title ${opts.options.color}">${opts.options.title}<div>`,

`<div class="title"><img src= "${require(`@/assets/imgs/kai.png`)}" width='32' height='32'/><div>`,

);

// let contentDom = $(`<div class="content">${opts.options.content}<div>`);

container.append(titleDom);

// container.append(contentDom);

this.showExpandBtn(container);

this.createText(container);

return container[0];

};

showExpandBtn(container = this.dom) {

let expandBtn = $(`<div class='expand-btn'>···</div>`);

expandBtn.on('click', e => {

e.stopPropagation();

e.preventDefault();

if (this.collapsed) {

// 可以在这里向后端请求数据,把node穿进去expand里面

this.expand();

} else {

this.collapse();

}

});

expandBtn.appendTo(container);

}

createText(container = this.dom) {

if (this.options.label) {

$('<span class="text-box"></span>').text(this.options.label).appendTo(container);

}

}

}

export default BaseNode;

edge.js

import $ from 'jquery';

import { Edge } from 'butterfly-dag';

class BaseEdge extends Edge {

draw(obj) {

let path = super.draw(obj);

if (this.options.color) {

$(path).addClass(this.options.color);

}

return path;

}

drawArrow(isShow) {

let dom = super.drawArrow(isShow);

if (this.options.color) {

$(dom).addClass(this.options.color);

}

return dom;

}

drawLabel(text) {

let dom = null;

if (text) {

dom = $(`<span class="label">${text}</span>`)[0];

}

return dom;

}

}

export default BaseEdge;

config.ts

import Node from './node.js';

import BaseEdge from './edge';

export const mockData: any = {

nodes: {

// 节点信息

isRoot: true,

id: 'Root',

title: '根节点',

content: 'root',

// iconClass: 'icon-class',

// iconType: 'icon-shujuji',

src: 'kai.png',

Class: Node,

// label: '节点上的描述',

endpoints: [

{

id: '1',

orientation: [0, 1],

pos: [0.5, 0],

},

],

children: [

{

id: 'subNode1',

Class: Node,

title: '子节点 1',

content: 'sub node 1',

// collapsed: true,

//iconType: 'icon-guize-kai',

// iconClass: 'icon-class',

label: '4011',

endpoints: [

{

id: '1',

orientation: [0, -1],

pos: [0.5, 0],

},

{

id: '2',

orientation: [0, 1],

pos: [0.5, 0],

},

],

children: [

{

id: 'subNode1-1',

Class: Node,

title: '子节点 1-1',

content: 'sub node 1-1',

//iconType: 'icon-guize-kai',

// iconClass: 'icon-class',

label: '4011',

endpoints: [

{

id: '1',

orientation: [0, -1],

pos: [0.5, 0],

},

{

id: '2',

orientation: [0, 1],

pos: [0.5, 0],

},

],

},

{

id: 'subNode1-2',

Class: Node,

title: '子节点 1-2',

content: 'sub node 1-2',

// iconType: 'icon-guize-kai',

// iconClass: 'icon-class',

label: '4011',

endpoints: [

{

id: '1',

orientation: [0, -1],

pos: [0.5, 0],

},

{

id: '2',

orientation: [0, 1],

pos: [0.5, 0],

},

],

},

],

},

{

id: 'subNode2',

Class: Node,

title: '子节点 2',

content: 'sub node 2',

// iconType: 'icon-guize-kai',

// iconClass: 'icon-class',

// collapsed: true,

label: '4011',

endpoints: [

{

id: '1',

orientation: [0, -1],

pos: [0.5, 0],

},

{

id: '2',

orientation: [0, 1],

pos: [0.5, 0],

},

],

children: [

{

id: 'subNode2-1',

Class: Node,

title: '子节点 2-1',

content: 'sub node 2-1',

// iconType: 'icon-guize-kai',

// iconClass: 'icon-class',

label: '4011',

endpoints: [

{

id: '1',

orientation: [0, -1],

pos: [0.5, 0],

},

{

id: '2',

orientation: [0, 1],

pos: [0.5, 0],

},

],

},

{

id: 'subNode2-2',

Class: Node,

title: '子节点 2-2',

content: 'sub node 2-2',

// iconType: 'icon-guize-kai',

// iconClass: 'icon-class',

label: '4011',

endpoints: [

{

id: '1',

orientation: [0, -1],

pos: [0.5, 0],

},

{

id: '2',

orientation: [0, 1],

pos: [0.5, 0],

},

],

},

],

},

{

id: 'subNode3',

Class: Node,

label: '4011',

title: '子节点 3',

content: 'sub node 3',

// iconType: 'icon-guize-kai',

// iconClass: 'icon-class',

endpoints: [

{

id: '1',

orientation: [0, -1],

pos: [0.5, 0],

},

{

id: '2',

orientation: [0, 1],

pos: [0.5, 0],

},

],

},

],

},

edges: [

// 连线信息

{

id: '0',

source: '1',

target: '1',

sourceNode: 'Root',

targetNode: 'subNode1',

type: 'endpoint',

// label: 'line描述',

// labelPosition: 0.9,

//arrowPosition: 0.7, // 箭头的位置

//labelOffset: 20,

Class: BaseEdge,

},

{

id: '1',

source: '1',

target: '1',

sourceNode: 'Root',

targetNode: 'subNode2',

type: 'endpoint',

// label: 'line描述',

// labelPosition: 0.9,

//labelOffset: 20,

Class: BaseEdge,

},

{

id: '2',

source: '1',

target: '1',

sourceNode: 'Root',

targetNode: 'subNode3',

type: 'endpoint',

// label: 'line描述',

//labelPosition: 0.9,

// labelOffset: 20,

Class: BaseEdge,

},

{

id: '3',

source: '2',

target: '1',

sourceNode: 'subNode1',

targetNode: 'subNode1-1',

type: 'endpoint',

// label: 'line描述',

Class: BaseEdge,

},

{

id: '4',

source: '2',

target: '1',

sourceNode: 'subNode1',

targetNode: 'subNode1-2',

type: 'endpoint',

// label: 'line描述',

Class: BaseEdge,

},

{

id: '5',

source: '2',

target: '1',

sourceNode: 'subNode2',

targetNode: 'subNode2-1',

type: 'endpoint',

// label: 'line描述',

Class: BaseEdge,

},

{

id: '6',

source: '2',

target: '1',

sourceNode: 'subNode2',

targetNode: 'subNode2-2',

type: 'endpoint',

// label: 'line描述',

Class: BaseEdge,

},

],

};

vue.js中使用D3树状图异步按需加载数据绘制人物关系图
weixin_33701251的博客
01-24 2354
2019独角兽企业重金招聘Python工程师标准>>> ...
Vue3 实现简单的关系图
weixin_50245419的博客
11-13 1527
Vue3运用插件【sf-relation】，实现简单的关系图
Butterfly美化
MoYu's Blog
02-10 1万+
Butterfly美化 首先提示，本文量特别大哦！基本上有所有的美化，还在持续更新ing，谨慎入坑… 主题配置文件修改 基础配置 最最最开始的，好不容易搭建了自己的个人博客，当然要写上自己的名字、签名…，证明身份。而且身为一个Chinese，还是中文舒服，所以主目录下_config.yml的配置文件： # Site title: FATE #标题名字 subtitle: '' description: '' #签名 keywords: author: MoYu-zc #作者名字 languag
Butterfly项目中的Edge边线使用详解
最新发布
gitblog_00474的博客
06-09 395
Butterfly项目中的Edge边线使用详解 前言 Butterfly是一个功能强大的可视化图形库，其中的Edge（边线）功能用于连接节点(Node)或锚点(Endpoint)，构建复杂的拓扑关系图。本文将全面介绍Edge的使用方法、属性配置以及扩展API。 Edge基础使用 Edge可以通过两种方式创建： 初始化时绘制： canvas.draw({ edges: [{ sour...
【阿里组件butterfly-dag react版组件平滑移植到vue3】
YC2chen的博客
01-13 1425
主要需要更改的就是.jsx文件，把其改为vue文件（Index.vue）.下载源文件，建立一个 vue3 项目把源文件放入项目中。
vue3项目中使用echarts实现关系图谱
qq_41839461的博客
10-11 1423
1）先设置个节点样式（注意name的值和后边节点数据中category的值需要对应方能起效,节点背景可设置为图片或是纯色）2）设置echarts为类型为关系图，图布局为力导图。1.下载安装echarts插件。4.进行echarts配置。3）对于节点和连线的配置。
Vue3 树状关系图
好记性，不如烂键盘。
07-11 615
原有的组件库和Echarts 不满足需求，手写原生树状图实现关系图
vue3使用butterfly-dag的示例
10-13
Vue3中使用Butterfly DAG（Directed Acyclic Graph蝴蝶有向图组件库）的示例通常涉及到数据驱动和组件化的图形化展示。以下是一个简单的步骤说明： 1. 首先，在项目中安装Butterfly DAG库： ```bash npm install ...
Butterfly: 一个专注于流程布局的JavaScript React/Vue2图示库
Butterfly是一个专注于流程布局领域的JavaScript库，它结合React和Vue 2框架构建，为流程图组件提供了一种高效且直观的方式来实现节点式编排。这个库的目标是为开发者提供一种数据驱动的方法来构建和管理复杂的图表...
分享一个阿里云轻量级开源前端图编排，流程图js组件——butterfly-dag
热门推荐
jambin_front的博客
08-04 1万+
背景       在阿里云，可能每时每刻都在身边充斥着“数据表”“模型”“调度”等等抽象概念。作为阿里云的前端，如何将这种抽象的概念实体化可视化地给客户或者其他合作伙伴展示出来显得尤为重要。       与此同时，在阿里云数据智能产品的孵化速度和迭代速度大大超乎大家的想象，总结起来就是“人少事多繁琐”，经常出现拉几个外包就开始孵化一个中台项目，此时，集团内各种搭建系统能缓解一部分的工作量，可是当遇到了可视化“编排”，“流程图”，
视频播放问题总结
charlene0824的博客
09-12 1925
最近一直在研究视频播放的问题，在研究过程中遇到很多问题，在这里总结一下遇到的问题和解决方法关于视频文件类型现在，视频文件可以大致分为两类：其一是 影像文件 ，比如说常见的VCD便是一例。其二是流式视频文件，比如说在线实况转播，就是构架在流式视频技术之上的。流式视频(Streaming Video)采用一种“边传边播”的方法，即先从服务器上下载一部分视频文件，形成视频流缓冲区后实时播放，同时继续下载，
vue-d3-graph:vue+d3v6实现动态知识图谱可视化展示（包含2D和3D图谱展示）
07-09
博客地址：https://blog.csdn.net/tiandao451/article/details/109708427 由于发现在我的博客通过点击GitHub链接，会跳转到别人盗用的下载地址，而且还是VIP收费，所以自己把代码上传优快云资源上。 【因为缺分，所以收5个积分，免费可以到Github上下载最新的代码】
VUE3知识图谱学习总结
10-24
VUE3知识图谱学习总结
全平台兼容的前后端分离博客系统设计与实现
资源摘要信息:"基于Springboot + Vue开发的前后端分离博客系统是一个完整的项目，具备PC端自适应、移动端微信小程序和移动端App的功能。该项目不仅提供了丰富的功能，还具有美观的设计和良好的用户体验。本项目适合...
vue3使用 butterfly-dag Demo
True Truth
02-19 428
在样式中导入 theme.less ( 该文件在官方的 example 目录下可以找到）将 index.jsx -> index.vue。这个样例用到了 less, 项目安装一个less。好了，这个项目就可以运行起来了。// 设置小地图并绘制数据。
uni-app的vue3语法完成小程序关系图（头像显示为圆形）
qq_53343891的博客
07-24 981
最近在工作中遇到一个需求，完成一个人脉关系图，然后头像展示为圆，
vue3+ehcarts关系图实现知识图谱
weixin_58547124的博客
05-26 399
需求原本是根据neo4j实现知识图谱，但是数据来源不需要通过neo4j.driver去调用，而是通过接口获取数据，实现效果如下：1. 实现对节点的增删改查和对关系的增删改查。2.实现画布的缩放和对图谱的下载。主要代码如下：index.vue（知识图谱数据获取和逻辑处理） neo-graph.vue（知识图谱展示） toolBox.vue（上方的放大缩小下载工具栏） nodeDetails.vue（详情展示面板） contentMenu.vue（右键菜单） form表单的代码可根据需求自行
vue3+setup语法糖+echarts的关系图
懒羊羊懒羊羊
05-09 663
1.从父组件传过来的数据props，再关系图子组件里，数据会有proxy[ { },{ },....]，这样echarts图无法识别数据，去除代理proxy const myGraphData = props.graphrData.myGraphData.filter((item) => { // console.log(item.name, 'item.name'); // if (item.name !== '') { // // myGraphData.push(i.
vue3 echarts5 graph关系图谱 点击图例节点消失线不消失重复生成问题
YUSIR 完美CODING世界
05-07 2251
const myChart = ref(null); const myCharts = ref(null); onMounted(() => { // 这种会导致线仍然存在 重复生成 myCharts.value = echarts.init(myChart.value); myCharts.value.setOption(option); }); return { myChart, myChar...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值