React项目中使用dagre-d3

React 基本上已经成为公司所有项目的前端必选框架了, JavaScript社区非常活跃，各种知名的库几乎都已经有了React的版本。但是一些库还没有，比如dagre-d3。 dagre-d3是一个来绘制关系图的Javascript库。

参考了一下react-highcharts，其实在React中实现dagre-d3也还好，并没有那么困难。

开始之前


npm i dagre-d3 -S
复制代码

准备一下数据node和edge，也就是点和边


const nodes = {
  0: { label: 'ReactComponent', style: 'fill: rgb(80, 194, 138);' },
  1: { label: 'props', style: 'fill: rgb(204, 230, 255);' },
  2: { label: 'context', style: 'fill: rgb(204, 230, 255);' },
  3: { label: 'refs', style: 'fill: rgb(204, 230, 255);' }
};
 
const edges = [
  [0, 1, { style: 'stroke: rgb(214, 214, 214); fill: none', curve: d3.curveBasis }],
  [0, 2, { style: 'stroke: rgb(214, 214, 214); fill: none', curve: d3.curveBasis }],
  [0, 3, { style: 'stroke: rgb(214, 214, 214); fill: none', curve: d3.curveBasis }]
];
复制代码

获取DOM node

这一步很重要，我们图当然是要绘制在DOM上了

ref 简介

Refs and the DOM

React提供的ref属性，表示为对组件真正实例的引用，其实就是ReactDOM.render()返回的组件实例。有一点要注意一下，ReactDOM.render()渲染组件时返回的是组件实例；而渲染dom元素时，返回是具体的dom节点。


getDOMRef(ref) {
  console.log(ref);
}
 
getComponentRef(ref) {
  console.log(ref);
}
 
<svg ref={
   this.getDOMRef} />
 
<DagreD3 ref=<