javascript和JQuery焦点图和代码特效大全
当前最流行的开源CMS网站系统大全
当前位置:首页 > WEB前端 > JavaScript > 

详解如何在react中搭建d3力导向图

来源:IT技术网编辑:雨天发布于:2018-01-14人围观

D3js力导向图搭建

d3js是一个可以基于数据来操作文档的JavaScript库。可以使用HTML,CSS,SVG以及Canvas来展示数据。力导向图能够用来表示节点间多对多的关系。

实现效果:连线有箭头,点击节点能改变该节点颜色和所连接的线的粗细,缩放、拖拽。

版本:4.X

安装和导入

npm安装:npm install d3

前端导入:import * as d3 from 'd3';

一、完整代码

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { push } from 'react-router-redux';
import * as d3 from 'd3';
import { Row, Form } from 'antd';
 
import { chartReq} from './actionCreator';
import './Chart.less';
 
const WIDTH = 1900;
const HEIGHT = 580;
const R = 30;
 
let simulation;
 
class Chart extends Component {
 constructor(props, context) {
  super(props, context);
  this.print = this.print.bind(this);
  this.forceChart = this.forceChart.bind(this);
  this.state = {
 
  };
 }
 
 componentWillMount() {
  this.props.dispatch(push('/Chart'));
 }
 
 componentDidMount() {
  this.print();
 }
 
 print() {
  let callback = (res) => { // callback获取后台返回的数据,并存入state
   let nodeData = res.data.nodes;
   let relationData = res.data.rels;
   this.setState({
    nodeData: res.data.nodes,
    relationData: res.data.rels,
   });
   let nodes = [];
   for (let i = 0; i < nodeData.length; i++) {
    nodes.push({
     id: (nodeData[i] && nodeData[i].id) || '',
     name: (nodeData[i] && nodeData[i].name) || '',
     type: (nodeData[i] && nodeData[i].type) || '',
     definition: (nodeData[i] && nodeData[i].definition) || '',
    });
   }
   let edges = [];
   for (let i = 0; i < relationData.length; i++) {
    edges.push({
     id: (relationData[i] && (relationData[i].id)) || '',
     source: (relationData[i] && relationData[i].start.id) || '',
     target: (relationData[i] && relationData[i].end.id) || '',
     tag: (relationData[i] && relationData[i].name) || '',
    });
   }
   this.forceChart(nodes, edges); // d3力导向图内容
  };
  this.props.dispatch(chartReq({ param: param }, callback));
 }
 
 // func
 forceChart(nodes, edges) {
  this.refs['theChart'].innerHTML = '';
 
  // 函数内其余代码请看拆解代码
  }
 
   render() {
  
    return (
     <Row style={{ minWidth: 900 }}>
      <div className="outerDiv">
       <div className="theChart" id="theChart" ref="theChart">
  
       </div>
      </div>
     </Row>
    );
   }
  }
 
  Chart.propTypes = {
   dispatch: PropTypes.func.isRequired,
  };
  
  function mapStateToProps(state) {
   return {
  
   };
  }
  
  const WrappedChart = Form.create({})(Chart);
  export default connect(mapStateToProps)(WrappedChart);

二、拆解代码

1.组件

?
1
2
<div className="theChart" id="theChart" ref="theChart">
</div>

整个图都将在div里绘制。

2.构造节点和连线

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
let nodes = []; // 节点
for (let i = 0; i < nodeData.length; i++) {
  nodes.push({
    id: (nodeData[i] && nodeData[i].id) || '',
    name: (nodeData[i] && nodeData[i].name) || '', // 节点名称
  });
}
let edges = []; // 连线
for (let i = 0; i < relationData.length; i++) {
  edges.push({
    id: (relationData[i] && (relationData[i].id)) || '',
    source: (relationData[i] && relationData[i].start.id) || '', // 开始节点
    target: (relationData[i] && relationData[i].end.id) || '', // 结束节点
    tag: (relationData[i] && relationData[i].name) || '', // 连线名称
  });
}

具体怎么构造依据你们的项目数据。

3.定义力模型

?
1
2
3
4
5
const simulation = d3.forceSimulation(nodes) // 指定被引用的nodes数组
  .force('link', d3.forceLink(edges).id(d => d.id).distance(150))
  .force('collision', d3.forceCollide(1).strength(0.1))
  .force('center', d3.forceCenter(WIDTH / 2, HEIGHT / 2))
  .force('charge', d3.forceManyBody().strength(-1000).distanceMax(800));

通过simulation.force()设置力,可以设置这几种力:

  1. Centering:中心力,设置图中心点位置。
  2. Collision:节点碰撞作用力,.strength参数范围为[0,1]。
  3. Links:连线的作用力;.distance设置连线两端节点的距离。
  4. Many-Body:.strength的参数为正时,模拟重力,为负时,模拟电荷力;.distanceMax的参数设置最大距离。

Positioning:给定向某个方向的力。

通过simulation.on监听力图元素位置变化。

4.绘制svg

?
1
2
3
4
5
6
7
8
const svg = d3.select('#theChart').append('svg') // 在id为‘theChart'的标签内创建svg
   .style('width', WIDTH)
   .style('height', HEIGHT * 0.9)
   .on('click', () => {
    console.log('click', d3.event.target.tagName);
   })
   .call(zoom); // 缩放
const g = svg.append('g'); // 则svg中创建g

创建svg,在svg里创建g,将节点连线等内容放在g内。

  1. select:选择第一个对应的元素
  2. selectAll:选择所有对应的元素
  3. append:创建元素

5.绘制连线

?
1
2
3
4
5
6
7
8
9
10
const edgesLine = svg.select('g')
  .selectAll('line')
  .data(edges) // 绑定数据
  .enter() // 添加数据到选择集edgepath
  .append('path') // 生成折线
  .attr('d', (d) => { return d && 'M ' + d.source.x + ' ' + d.source.y + ' L ' + d.target.x + ' ' + d.target.y; }) // 遍历所有数据,d表示当前遍历到的数据,返回绘制的贝塞尔曲线
  .attr('id', (d, i) => { return i && 'edgepath' + i; }) // 设置id,用于连线文字
  .attr('marker-end', 'url(#arrow)') // 根据箭头标记的id号标记箭头
  .style('stroke', '#000') // 颜色
  .style('stroke-width', 1); // 粗细

连线用贝塞尔曲线绘制:(M  起点X  起点y  L  终点x  终点y)

6.绘制连线上的箭头

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const defs = g.append('defs'); // defs定义可重复使用的元素
const arrowheads = defs.append('marker') // 创建箭头
  .attr('id', 'arrow')
  // .attr('markerUnits', 'strokeWidth') // 设置为strokeWidth箭头会随着线的粗细进行缩放
  .attr('markerUnits', 'userSpaceOnUse') // 设置为userSpaceOnUse箭头不受连接元素的影响
  .attr('class', 'arrowhead')
  .attr('markerWidth', 20) // viewport
  .attr('markerHeight', 20) // viewport
  .attr('viewBox', '0 0 20 20') // viewBox
  .attr('refX', 9.3 + R) // 偏离圆心距离
  .attr('refY', 5) // 偏离圆心距离
  .attr('orient', 'auto'); // 绘制方向,可设定为:auto(自动确认方向)和 角度值
arrowheads.append('path')
  .attr('d', 'M0,0 L0,10 L10,5 z') // d: 路径描述,贝塞尔曲线
  .attr('fill', '#000'); // 填充颜色
  1. viewport:可视区域
  2. viewBox:实际大小,会自动缩放填充viewport

7.绘制节点

?
1
2
3
4
5
6
7
8
9
10
11
12
13
const nodesCircle = svg.select('g')
  .selectAll('circle')
  .data(nodes)
  .enter()
  .append('circle') // 创建圆
  .attr('r', 30) // 半径
  .style('fill', '#9FF') // 填充颜色
  .style('stroke', '#0CF') // 边框颜色
  .style('stroke-width', 2) // 边框粗细
  .on('click', (node) => { // 点击事件
    console.log('click');
  })
  .call(drag); // 拖拽单个节点带动整个图

创建圆作为节点。

.call()调用拖拽函数。

8.节点名称

?
1
2
3
4
5
6
7
8
9
10
11
12
const nodesTexts = svg.select('g')
  .selectAll('text')
  .data(nodes)
  .enter()
  .append('text')
  .attr('dy', '.3em') // 偏移量
  .attr('text-anchor', 'middle') // 节点名称放在圆圈中间位置
  .style('fill', 'black') // 颜色
  .style('pointer-events', 'none') // 禁止鼠标事件
  .text((d) => { // 文字内容
    return d && d.name; // 遍历nodes每一项,获取对应的name
  });

因为文字在节点上层,如果没有设置禁止鼠标事件,点击文字将无法响应点击节点的效果,也无法拖拽节点。

9.连线名称

?
1
2
3
4
5
6
7
8
9
10
11
const edgesText = svg.select('g').selectAll('.edgelabel')
  .data(edges)
&nb