REACT-D3 network-visual-graph(关系

这篇文章一直在酝酿中，一直不知以什么方式来写。想来想去最终还是平白直述的方式来讲：从创建项目，引入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节点上进行操作。