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绘制流程图的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。