dagreD3.js: 一个基于D3的专注于有向图布局(流程图)javascript库。

dagreD3.js: 一个基于D3的专注于有向图布局(流程图)javascript库。

参考原文链接:dagre/dagre-d3绘制流程图
参考原文链接:dagre/dagre-d3绘制流程图
参考原文链接:dagre/dagre-d3绘制流程图

一开始是用的echarts的关系图,type:‘graph’,但是关系图里面的series.data
很不好处理,他需要每个点的X,Y坐标.后来又换成了关系图和线图type:'line’的结合体,但是依然是老问题,data里面需要横纵坐标,line里面需要source和target,谁指向谁.

然后直接百度qcc的股权穿刺图,发现基本上都是用到d3写的,但是d3框架有点大,学起来,阅读代码起来都是1000行起步,难的去看.后来找到这个基于d3的dagreD3.js,发现写起来就比较方便了,废话不多说,直接撸代码.

npm i dagre-d3
npm i d3@5.16.0 //我这里安装的v5版本,d3现在最新的版本应该到v7了,一开始安装的是v7,但是v7有些东西没有,例如下面代码的event

// 引入
import dagreD3 from "dagre-d3";
import * as d3 from "d3";

// vue 里面的data数据
 data () {
   return {
     list: {
       nodeInfos: [  // 节点数组
       ],
       edges: [  //节点之间关系数组
       ]
     },
     tooltip: this.createTooltip(), //创建tooptip窗体 ,即鼠标移入有窗体显示
     gGraph: new dagreD3.graphlib.Graph().setGraph({ // 初始画布板式
       rankdir:'TB', //设置 node 节点的延伸排列方向，它有4个值: TB, BT, LR, 或者 RL 可选，默认是’TB’（从上到下）。
       align:'DL',
       nodesep: 100,
       edgesep:100,
       ranksep: 50,
       marginx:50,
       marginy:100
     })
   };
 },

 created () {
   this.list.nodeInfos = [
      { id: 0, label: "TAOBAO HOLDING LIMITED", shape: "rect", },
      { id: 1, label: "淘宝中国控股有限公司", shape: "rect" },
      { id: 2, label: "淘宝（中国）软件有限公司", shape: "rect" },
      { id: 3, label: "浙江天猫技术有限公司", shape: "rect" },
      { id: 4, 
        label: "阿里巴巴（中国）网络技术有限公司", 
        shape: "rect",
        nodeStyle:'fill:#128aeb;stroke:#9fbed2',
        labelStyle:"fill:#fff" 
      },
    ],
   this.list.edges = [
	{ source: 0, target: 1, label: "100%" },
  	{ source: 2, target: 1, label: "100%" },
    { source: 1, target: 3, label: "57.945%",
	   	edgeStyle:"fill:#fff;stroke:#fc485e;stroke-width:1.5px",
	    arrowheadStyle:'fill:#fc485e',
	    labelStyle:'fill:#fc485e'
    	},
    ]
 },
 /**
node 配置
	labelType节点标签格式,可以设置文本以及html格式
	label 节点标签，即节点上要显示的文本，设置html格式时，label为html标签
	shape 节点形状，可以设置rect,circle,ellipse,diamond 四种形状，还可以使用render.shapes()自定义形状
	style 节点样式, 可设置节点的颜色填充、节点边框，如style: “fill:#fff;stroke:#faf”
	labelStyle 节点标签样式, 可设置节点标签的文本样式（颜色、粗细、大小），如style: “fill:#afa;font-weight:bold”
	width 即节点宽度
	height 即节点高度


edge 配置
	abelType边标签格式，可以设置文本以及 html 格式，默认为文本格式。
	label 边标签，即节点上要显示的文本，设置 html 格式时，label为 html 标签。
	style 边样式, 可设置边的颜色填充、边框，如style: “fill:#fff;stroke:#faf”
	labelStyle 边标签样式, 可设置边标签的文本样式（颜色、粗细、大小），如labelStyle: “fill:#afa;font-weight:bold”
	arrowhead 箭头形状，可以设置 normal,vee,undirected 三种样式，默认为 normal。
	arrowheadStyle 箭头样式，可以设置箭头颜色等，如 arrowheadStyle:“fill:#f66”
**/

mounted () {
    this.setNodeFun()
    this.setEdgeFun()
    this.renderFun()
}
methods:{
 // 生成节点
    setNodeFun () {
      this.list.nodeInfos && this.list.nodeInfos.forEach((item) => {

        this.gGraph.setNode(item.id, {
          //节点标签
          
          label: item.label,
          labelStyle:item.labelStyle || 'fill:#000',
          //节点形状
          shape: item.shape,
          //节点样式
          style: item.nodeStyle || "fill:#fff;stroke:#9fbed2"
        })
      })
    },
    // 生成链接线
    setEdgeFun () {
      this.list.edges.forEach(item => {
        this.gGraph.setEdge(item.source, item.target, {
          //边标签
          label: item.label,
          labelStyle :item.labelStyle || "fill:#84b8e0",
          //边样式
          style: item.edgeStyle || "fill:#fff;stroke:#e1e1e1;stroke-width:1.5px",
          arrowheadStyle :item.arrowheadStyle || 'fill:#2385d2'
        })
      });
    },
    //绘制图形
    renderFun () {
      const that = this
      const svgAb = d3.select("svg"),
        innerAb = svgAb.select("g");
      //缩放
      // const zoom = d3.zoom().on("zoom", function () {
      //   inner.attr("transform", d3.event.transform);
      // });
      // svg.call(zoom);
      const render = new dagreD3.render();
      render(innerAb, this.gGraph);
        
      innerAb.selectAll("g.node")
      .on("mouseover", function (v) {
        that.tipVisible(that.gGraph.node(v).label);
      })
      .on("mouseout", function () {
        that.tipHidden();
      })
    },
      //创建提示框
    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');
    },
}

<template>
  <div class="flow-chart">
    <svg
      width="2400"
      height="1600"
    >
      <g />
    </svg>
  </div>

</template>