vue引入D3绘制流程图

npm install d3
npm install dagre-d3

这样项目里面就可直接引入使用了如过项目里面使用比较多可以在main.js里面全局引入不多的话就在vue文件里面引入即可

import dagreD3 from 'dagre-d3'
import * as d3 from 'd3'

需要注释我都标注在代码里面了

    // 设置节点和连线renderGagre() {let self = thisthis.tooltip = this.createTooltip()// 创建graph对象const g = new dagreD3.graphlib.Graph()// 设置图g.setGraph({rankdir: 'TB', // T:top B:bottommarginx: 60,marginy: 80,edgesep: 100,ranksep: 60,})// this.chartList.forEach((item) => {//   g.setNode(item.id, {//     // 节点标签//     label: item.label,//     // 节点形状//     shape: item.shape,//     // toolText: item.toolText,//     // 节点样式//     style: item.color ? item.color : "fill:#c0c1c3;stroke:transparent",// 根据后台数据来改变节点颜色//     labelStyle: "fill:#fff;",//     width: 83,//     height: 40//   });// });// this.linkList.forEach((item) => {//   g.setEdge(item.source, item.target, {//     // 边标签//     // label: item.label,//     arrowheadStyle: item.color ? item.color : "fill:#c0c1c3;", // 根据后台数据来改变连线箭头的颜色//     // 边样式//     style: item.color//       ? item.color//       : "fill:#ffffff;stroke:#c0c1c3;stroke-width:1.5px" // 根据后台数据来改变连线的颜色//   });// });//---------------------上面注释的是一种显示的办法 就是分别加流程图的节点和线this.states = []this.chartList.map((item) => {this.states.push(item.currentPoint)})  //  所有节点名称起点的数组this.chartList.map((item) => {this.states.push(item.absender)})  // 所有节点名称终点的数组this.states = [...new Set(this.states)]    // es6去重// Automatically label each of the nodesthis.states.forEach(function (state) {g.setNode(state, { label: state })})this.chartList.forEach((item) => {g.setEdge(item.currentPoint, item.absender, { label: '' })})g.nodes().forEach(function (v) {var node = g.node(v)node.rx = node.ry = 5})if (this.states.length) {g.node(this.states[0]).style = 'fill: #f77'  //  第一个节点添加颜色}// 创建渲染器const render = new dagreD3.render()// 建立拖拽缩放let svg = d3.select('svg')// 选择svg并添加一个g元素作为绘图容器let svgGroup = svg.append('g')// const zoom = d3.zoom().on("zoom", () => {// svgGroup.attr("transform", d3.event.transform);// });var zoom = d3.behavior.zoom().on('zoom', function () {svgGroup.attr('transform','translate(' +d3.event.translate +')' +'scale(' +d3.event.scale +')',)})svg.call(zoom)// 在绘图容器上运行渲染器生成流程图render(svgGroup, g)// Center the graphvar initialScale = 0.9  // 这个是图形缩小的倍数zoom.translate([(self.$refs.drawer.offsetHeight - g.graph().width * initialScale) / 2,20,]).scale(initialScale).event(svg)svg.attr('height', g.graph().height * initialScale + 10)// var xCenterOffset = (svg.attr('width') - g.graph().width) / 2// svgGroup.attr('transform', 'translate(' + xCenterOffset + ', 20)')// svg.attr('height', g.graph().height + 40)// 鼠标悬停显示隐藏tooptipsvgGroup.selectAll('g.node').on('mouseover', (v) => {// 假如当前toolText为"",则不展示//这里就是自定义tooltip的内容let filList = [],strList = []filList = self.chartList.filter((ii) => {return ii.currentPoint === g.node(v).label})if (!filList.length) {return}filList.map((k) => {strList.push(k.telegram)})self.tipVisible(strList.join('\n'))}).on('mouseout', () => {this.tipHidden()})svgGroup.selectAll('g.node').on('click', (e) => {//点击事件// code = this.list.nodeInfos.filter(item => {//     return item.id == e;// });// console.log(code);let pointObj = this.chartList.filter((item) => {return item.currentPoint === e})self.logShow = trueself.currSpool = esetTimeout(() => {self.logLoading = true}, 60)self.logList = []self.getLogInfo(pointObj)})},// 创建提示框createTooltip() {return d3.select('body').append('div').classed('tooltip', true).style('opacity', 0).style('display', 'none')},// tooltip显示tipVisible(textContent) {this.tooltip.transition().duration(400).style('opacity', 0.9).style('display', 'block')this.tooltip.html(textContent).style('left', `${d3.event.pageX + 15}px`).style('top', `${d3.event.pageY + 15}px`)},// tooltip隐藏tipHidden() {this.tooltip.transition().duration(400).style('opacity', 0).style('display', 'none')},

.tooltip {z-index: 10000;position: absolute;font-size: 12px;text-align: left;background-color: white;border-radius: 3px;box-shadow: rgb(174, 174, 174) 0px 0px 10px;cursor: pointer;display: inline-block;padding: 6px;max-width: 300px;word-wrap: break-word;word-break: normal;
}.tooltip > div {padding: 10px;
}
.node rect {stroke: #333;fill: #999;
}
.node {cursor: pointer;
}.edgePath path {stroke: #333;fill: #333;stroke-width: 1.5px;
}

上面有借鉴大佬的自己页根据需求改了些代码有点乱在这里记录下~

记录大佬的链接：https://blog.csdn.net/davidPan1234/article/details/82851392?utm_medium=distribute.pc_relevant.none-task-blog-OPENSEARCH-7.control&depth_1-utm_source=distribute.pc_relevant.none-task-blog-OPENSEARCH-7.control

vue引入D3绘制流程图相关推荐

jQuery+d3绘制流程图
jQuery + d3绘制流程图运行效果代码 HTML代码 <!DOCTYPE html> <html style="overflow: hidden;"&g ...
一款基于VUE的在线绘制流程图工具安装使用node.js
1.安装node.js 下载地址:https://nodejs.org/en/download/ 安装一下三项,并检查是否成功: node -v npm -v vue -V(大写的V) 一款基于VUE ...
VUE+bpmn.js+iview 页面绘制流程图
前言:业务需求需要在页面绘制流程图,之前后台的同事都是在eclipse画的流程图,为了方便点希望能在页面上画. 我用的是iview的ui框架,用原生的话记得把按钮等标签改改. 如果用的是element ...
Vue项目中使用AntV X6绘制流程图
Vue项目中使用AntV X6绘制流程图一.需求在Vue2.x(Vue3.x项目同理)项目中使用AntV X6组件库绘制流程图,需要实现以下需求: 需求1:左侧菜单中的模块可以拖拽进入画布中生成对 ...
基于VUE和JSPlumb的在线绘制流程图工具
基于VUE和JSPlumb的在线绘制流程图工具介绍 VUE FLOW DESIGN流程设计器,基于Vue + Ant Design Vue + JSPlumb,该组件目的是为了使用在Vue项目中,它 ...
Vue+D3 绘制条形图和力导向图
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 Vue+D3 绘制条形图和力导向图准备:D3代码 1.条形图 2.力导向图本篇blog在于把已经编写好的D3代码从一般HTML文件 ...
dagre/dagre-d3绘制流程图
dagre/dagre-d3绘制流程图概念步骤知识点配置项 gragh 配置 node 配置 edge 配置交互拖拽缩放鼠标悬停 tootip 参考概念 dagre 是专注于有向图布局 ...
【项目技术点总结之一】vue集成d3.js利用svg加载图片实现缩放拖拽功能
[项目技术点总结之一]vue集成d3.js利用svg加载图片实现缩放拖拽功能前言概述技术介绍实现过程插件安装引用组件初始化组件实现效果简单理解使用d3创建一个svg 在svg中提添 ...
html引入百度地图报错,vue引入百度地图BMapGL，或者其他个性化地图
3.jpg vue的百度地图早就有vue-baidu-map这里就不赘述了, 自己去直接对着API写就好了,基本上已经满足绝大多数需求了还简单方便. vue-baidu-map 传送门 https:/ ...

vue引入D3绘制流程图

vue引入D3绘制流程图相关推荐

最新文章

热门文章