这篇文章一直在酝酿中，一直不知以什么方式来写。想来想去最终还是平白直述的方式来讲：从创建项目，引入D3，开始绘制图形，添加修改元素，最后完成。
React
React
是一个用于构建用户界面的JavaScript库。它使创建可重用组件变得容易，这些组件可以组合在一起形成更复杂的组件。
这些组件能够自己维护它们的状态。
D3
D3.js
是一个基于数据操作文档的JavaScript库。D3帮助您使用HTML、SVG和CSS来处理数据。D3对web标准的强调为您提供了现代浏览器的全部功能，而不需要将自己绑定到专用框架，它结合了强大的可视化组件和数据驱动的DOM操作方法。
安装React，添加D3
安装react最简单的方法是使用react团队的create-react-app模板。
在本地机器上全局安装，以便可以重用，在终端上运行以下命令:
npm install -g create-react-app
接下来使用create-react-app模板创建一个新的app
create-react-app react-d3-network-visual-graph
cd react-d3-network-visual-graph
yarn add d3
现在准备工作做完了，我们可以在React中使用D3进行数据可视化开发了。
启动项目
yarn start
使用自己喜欢的编辑器（我用vscode）打开工程。
这是当前在浏览器中呈现的组件。我们需要删除render()方法的内容，替换成我们自己的内容。
在src目录中创建一个Graph文件，添加index.js，用来创建关系图谱。添加画图用的数据，我们直接写在data.js。
index.js文件结构
import React, {Component} from 'react';
import './index.css';
import * as d3 from 'd3';
import data from './data';
class NetworkVisualGraph extends Component {
constructor(props) {
super(props)
this.state = {
svg: null,
simulation: null
};
}
componentDidMount() {
this.drawGraph();
}
...
...
...
render() {
return <div className="network-visual">
<h1>关系图谱</h1>
<div className="content" id="networkVisual"></div>
</div>
}
}
export default NetworkVisualGraph;
接下来添加各个元素
添加箭头
添加正向和反向箭头，节点间连线箭头不用每次都创建箭头线，直接调用创建好的箭头线。
initMarker() {
const svg = this.state.svg;
svg.append('defs').selectAll('marker')
.data(['back', 'face'])
.enter().append('marker')
.attr('id', d => 'marker-' + d)
.attr('viewBox', '0, 0, 6, 6')
.attr('refX', 18)
.attr('refY', 3)
.attr('markerWidth', 6)
.attr('markerHeight', 6)
.attr('orient', 'auto')
.append('path')
.attr('d', 'M0 0 L6 3 L0 6 Z')
.attr('fill', '#999');
}
添加边，返回links模拟连线
initLink(links) {
const svg = this.state.svg;
const gLists = svg.append('g')
.attr('class', 'links')
.selectAll('g')
.data(links)
.enter().append('g');
return gLists.append('path')
.attr('class', 'link')
.attr('marker-end', (d) => 'url(#marker-face)');
}
添加节点，返回节点
画圆形节点，可以根据节点的类型不一样设置不同的颜色，不同的内容显示。
initNode(nodes) {
const svg = this.state.svg;
const gLists = svg.append('g')
.attr('class', 'nodes')
.selectAll('g')
.data(nodes)
.enter()
.append('g')
.attr('class', (d) => 'node-' + d.id)
.call(d3.drag()
.on('start', this.dragStarted.bind(this))
.on('drag', this.dragged.bind(this))
.on('end', this.dragEnded.bind(this)));
const circleLists = gLists.append('circle')
.attr('r', 20)
.attr('fill', (d) => {
// TODO:根据节点选择颜色
return '#81bef4';
});
const textLists = gLists.append('text')
.attr('class', (d) => 'node-icon icon-' + d.id)
.text(d => {
// TODO：根据节点选择图标
return 'ICON';
});
return { node: circleLists, textNode: textLists };
}
画箭头线弧度
根据需要设置不同弧度的箭头线，变化箭头线的形状。给simulation.tick生成线的时候调用
linkArc(d) {
const dx = d.target.x - d.source.x;
const dy = d.target.y - d.source.y;
const dr = Math.sqrt(dx * dx + dy * dy);
return 'M' + d.source.x + ',' + d.source.y + 'A0,' + dr + ' 0 0,1 ' + d.target.x + ',' + d.target.y;
}
模拟节点和线的变换
initTicked(link, node) {
node
.attr('cx', d => d.x)
.attr('cy', d => d.y);
link.attr('d', d => this.linkArc(d))
.attr('x1', d => d.source.x)
.attr('y1', d => d.source.y)
.attr('x2', d => d.target.x)
.attr('y2', d => d.target.y);
}
拖拽
拖拽节点事件
dragStarted(d) {
const simulation = this.state.simulation;
if (!d3.event.active) simulation.alphaTarget(0.4).restart();
d.fx = d.x;
d.fy = d.y;
}
dragged(d) {
d.fx = d3.event.x;
d.fy = d3.event.y;
}
dragEnded(d) {
const simulation = this.state.simulation;
if (!d3.event.active) simulation.alphaTarget(0);
d.fx = d3.event.x;
d.fy = d3.event.y;
}
初始化对象
const svg = d3.select('#networkVisual')
.append('svg')
.attr('width', '100%')
.attr('height', '100%')
.call(d3.zoom().scaleExtent([0.2, 3]).on('zoom', () => {
d3.zoomTransform(d3.selectAll());
}));
const width = window.innerWidth;
const height = window.innerHeight - 80;
const eles = data.elements;
const simulation = d3.forceSimulation()
.force('link', d3.forceLink().id(d => d.id).distance(60))
.force('charge', d3.forceManyBody().strength(-300).distanceMin(100).distanceMax(800))
.force('collision', d3.forceCollide(40))
.force('center', d3.forceCenter(width / 2, height / 2));
this.setState({ svg, simulation }, () => {
this.initMarker();
const link = this.initLink(eles.edges);
const { node } = this.initNode(eles.nodes);
node.append('title')
.text((d) => d.id);
simulation
.nodes(eles.nodes)
.on('tick', this.initTicked.bind(this, link, node));
simulation.force('link')
.links(eles.edges);
});
到目前基本点的绘制完成。
image.png
以上就是整个绘制流程。选择是使用svg方式绘制关系图谱，整个dom非常好操作，如果需要新增其他功能可以在dom节点上进行操作。
