vue dagre-d3 基于d3.js v3版本以上
npm i d3@3.xnpm i dagre-d3@0.3.0弹窗用的不是tispy 自己写的。不支持拖拽 没有写。<template><div class="Newdagre"><svg width="960" height="1000"/><div class="chartTooltip"&g...
·
npm i d3@3.x
npm i dagre-d3@0.3.0
弹窗用的不是tispy 自己写的。
不支持拖拽 没有写。
<template>
<div class="Newdagre">
<svg width="960" height="1000"/>
<div class="chartTooltip">
<p id="chartTooltipText">
<span class="chartTooltip-textMoney"/>
</p>
</div>
</div>
</template>
<script>
import * as d3 from 'd3'
import dagreD3 from 'dagre-d3'
export default {
name: 'Newdagre',
mounted() {
this.typeNode()
},
methods: {
typeNode() {
const g = new dagreD3.graphlib.Graph().setGraph({ rankdir: 'BT' })
const states = {
'circle': { shape: 'circle' },
Start: { shape: 'circle', style: 'fill: #f77' },
'JW002': { shape: 'circle' },
'JW003': { shape: 'circle' },
'JW004': { shape: 'circle' },
'JW005': { shape: 'circle' },
'JW006': { shape: 'circle' },
'JW007': { shape: 'circle' },
'JW008': { shape: 'circle' },
'JW009': { shape: 'circle' },
'JW010': { shape: 'circle' },
'JW011': { shape: 'circle' },
'JW012': { shape: 'circle' },
'JW013': { shape: 'circle' },
'JW014': { shape: 'circle' },
'JW015': { shape: 'circle' },
'JW016': { shape: 'circle' },
'End': { shape: 'circle' }
}
Object.keys(states).forEach(function(state) {
const value = states[state]
value.label = state
value.padding = 0
value.height = 30
value.width = 30
value.r = 15
value.rx = value.ry = 5
g.setNode(state, value)
})
g.setEdge('circle', 'JW002', { label: '001 ', lineInterpolate: 'basis' })
g.setEdge('Start', 'JW003', { label: '001 ', lineInterpolate: 'basis' })
g.setEdge('Start', 'JW004', { label: '001 ', lineInterpolate: 'basis' })
g.setEdge('JW002', 'JW005', { label: '001 ', lineInterpolate: 'basis' })
g.setEdge('JW002', 'JW006', { label: '001 ', lineInterpolate: 'basis' })
g.setEdge('JW003', 'JW006', { label: '001 ', lineInterpolate: 'basis' })
g.setEdge('JW003', 'JW007', { label: '001 ', lineInterpolate: 'basis' })
g.setEdge('JW004', 'JW008', { label: '001 ', lineInterpolate: 'basis' })
g.setEdge('JW004', 'JW009', { label: '001 ', lineInterpolate: 'basis' })
g.setEdge('JW005', 'JW010', { label: '001 ', lineInterpolate: 'basis' })
g.setEdge('JW005', 'JW011', { label: '001 ', lineInterpolate: 'basis' })
g.setEdge('JW005', 'JW012', { label: '001 ', lineInterpolate: 'basis' })
g.setEdge('JW006', 'JW013', { label: '001 ', lineInterpolate: 'basis' })
g.setEdge('JW007', 'JW014', { label: '001 ', lineInterpolate: 'basis' })
g.setEdge('JW007', 'JW015', { label: '001 ', lineInterpolate: 'basis' })
g.setEdge('JW008', 'JW016', { label: '001 ', lineInterpolate: 'basis' })
g.setEdge('JW009', 'JW015', { label: '001 ', lineInterpolate: 'basis' })
g.setEdge('JW009', 'JW016', { label: '001 ', lineInterpolate: 'basis' })
g.setEdge('JW010', 'End', { label: '001 ', lineInterpolate: 'basis' })
g.setEdge('JW011', 'End', { label: '001 ', lineInterpolate: 'basis' })
g.setEdge('JW012', 'End', { label: '001 ', lineInterpolate: 'basis' })
g.setEdge('JW013', 'End', { label: '001 ', lineInterpolate: 'basis' })
g.setEdge('JW014', 'End', { label: '001 ', lineInterpolate: 'basis' })
g.setEdge('JW015', 'End', { label: '001 ', lineInterpolate: 'basis' })
g.setEdge('JW016', 'End', { label: '001 ', lineInterpolate: 'basis' })
const render = dagreD3.render()
const svg = d3.select('svg')
const inner = svg.append('g')
// console.log(render)
// console.log(g)
render(inner, g)
d3.select('svg').select('g.output').attr('width', '1000').attr('height', '1000')
const nodeEnter = d3.select('svg').selectAll('g.node')
nodeEnter.select('circle')
.on('mouseover', function(d) {
if (this.timer) clearTimeout(this.timer)
d3.select('.chartTooltip').transition().duration(300).style('opacity', 1).style('display', 'block')
const yPosition = d3.event.layerY + 20
const xPosition = d3.event.layerX + 20
const chartTooltip = d3.select('.chartTooltip')
.style('left', xPosition + 'px')
.style('top', yPosition + 'px')
chartTooltip.select('.chartTooltip-textMoney').text('地址:' + d)
d3.select('.chartTooltip').on('mouseover', () => {
if (this.timer) clearTimeout(this.timer)
d3.select('.chartTooltip').transition().duration(300).style('opacity', 1).style('display', 'block')
}).on('mouseout', () => {
this.timer = setTimeout(function() {
d3.select('.chartTooltip').transition().duration(300).style('opacity', 0).style('display', 'none')
}, 200)
})
})
.on('mouseout', () => {
this.timer = setTimeout(function() {
d3.select('.chartTooltip').transition().duration(300).style('opacity', 0).style('display', 'none')
}, 200)
})
nodeEnter.select('g.label')
.attr('transform', 'translate(50, 20)')
}
}
}
</script>
.Newdagre{
width: 100%;
height: 100%;
display: flex;
position: relative;
}
.Newdagre svg{
width: 100%;
height: 100%;
}
.Newdagre .node rect {
stroke: #333;
fill: #fff;
}
.Newdagre .edgePath path {
stroke: #333;
fill: #333;
stroke-width: 1.5px;
}
.Newdagre .node circle{
fill: #333;
}
.chartTooltip {
position: absolute;
height: auto;
padding: 10px;
box-sizing: border-box;
background-color: white;
border-radius: 5px;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
opacity: 0;
}
.chartTooltip p {
margin: 0;
font-size: 14px;
line-height: 20px;
word-wrap: break-word;
}
.chartTooltip p span{
display: flex;
}
更多推荐
已为社区贡献3条内容
所有评论(0)