darge-d3有向图绘制

官网git地址

dagre
dagre-d3

安装依赖

- npm 安装引入
	npm install --save d3 dagre-d3
	引用：
		import dagreD3 from "dagre-d3";
		import * as d3 from "d3";
- 原生js下载引入

绘制

• 创建Graph对象
  let g = new dagreD3.graphlib.Graph();
• 设置图
  g.setGraph({rankdir:‘TB’}) //TB、LR、BT、RL(绘制图方向)
• 设置默认label
  g.setDefaultEdgeLabel(function(){return{}})
• 设置节点

	g.setNode(id, {
		id, //节点id唯一
		label, //节点文案显示
		labelType:"html',
		shape, //节点形状 rect、circle、ellipse（椭圆）、diamond（砖石）
		style, //节点样式设置，背景色边框等
		labelStyle, //节点标签样式设置，字体大小颜色等设置
		rx, //圆角大小设置
		xy,
		paddingTop,
		paddingBottom,
		paddingLeft,
		paddingRight
	})

• 设置连接关系线

	g.setEdge(start, end,  {
		label,
		style,
		arrowheadStyle, //箭头样式设置
		arrowhead //箭头形状，可以设置 normal,vee,undirected 三种样式，默认为 normal
	})

• 创建渲染器
  let render = new dagreD3.render();
• 获取要绘制图的容器
  let container = d3.select(‘svg g’);
• 渲染
  render(container, g);
• 拖拽缩放

const svg = d3.select('svg')
svg.select('g').remove() //删除以前的节点
svg.append('g')
var zoom = d3.zoom().on('zoom', function() {
  container.attr('transform', d3.event.transform)
})
svg.call(zoom)

• 节点绑定事件
  1. svg.selectAll(“g.node”).on(‘mouseover’, function({
     //d3.event.pageX 可获取鼠标当前位置
     });
  2. container.selectAll(“g.node”).on(“mouseover”, function (v){})
  3. const svgCanvas = document.getElementById(‘svgCanvas’);
     svgCanvas.addEventListener(‘mouseover’, function (e) {});