vue dagre-d3 基于d3.js v3版本以上

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;
}