D3js力导向图搭建
d3js是一个可以基于数据来操作文档的JavaScript库。可以使用HTML,CSS,SVG以及Canvas来展示数据。力导向图能够用来表示节点间多对多的关系。
实现效果：连线有箭头，点击节点能改变该节点颜色和所连接的线的粗细，缩放、拖拽。
版本：4.X
npm安装：npm install d3
前端导入：import * as d3 from 'd3';
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" 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.组件
<div className="theChart" ref="theChart"> </div>
整个图都将在div里绘制。
2.构造节点和连线
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.定义力模型
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()设置力，可以设置这几种力：
Centering：中心力，设置图中心点位置。
Collision：节点碰撞作用力，.strength参数范围为[0，1]。
Links：连线的作用力；.distance设置连线两端节点的距离。
Many-Body：.strength的参数为正时，模拟重力，为负时，模拟电荷力；.distanceMax的参数设置最大距离。
Positioning：给定向某个方向的力。
通过simulation.on监听力图元素位置变化。
4.绘制svg
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内。
select：选择第一个对应的元素
selectAll：选择所有对应的元素
append：创建元素
5.绘制连线