首页 / REACT / 详解如何在react中搭建d3力导向图

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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了详解如何在react中搭建d3力导向图，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含10047字，纯文字阅读大概需要15分钟。

内容图文

D3js力导向图搭建

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

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

版本：4.X

详解如何在react中搭建d3力导向图 - 文章图片

安装和导入

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" 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.组件

<div className="theChart" id="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.绘制连线

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.绘制连线上的箭头

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'); // 填充颜色

viewport：可视区域
viewBox：实际大小，会自动缩放填充viewport

7.绘制节点

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.节点名称

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.连线名称

const edgesText = svg.select('g').selectAll('.edgelabel')
  .data(edges)
  .enter()
  .append('text') // 为每一条连线创建文字区域
  .attr('class', 'edgelabel')
  .attr('dx', 80)
  .attr('dy', 0);
edgesText.append('textPath')// 设置文字内容
  .attr('xlink:href', (d, i) => { return i && '#edgepath' + i; }) // 文字布置在对应id的连线上
  .style('pointer-events', 'none')
  .text((d) => { return d && d.tag; });

10.鼠标移到节点上有气泡提示

nodesCircle.append('title')
  .text((node) => { // .text设置气泡提示内容
    return node.definition;
  });

11.监听图元素的位置变化

simulation.on('tick', () => {
  // 更新节点坐标
  nodesCircle.attr('transform', (d) => {
    return d && 'translate(' + d.x + ',' + d.y + ')';
  });
  // 更新节点文字坐标
  nodesTexts.attr('transform', (d) => {
    return 'translate(' + (d.x) + ',' + d.y + ')';
  });
  // 更新连线位置
  edgesLine.attr('d', (d) => {
    const path = 'M ' + d.source.x + ' ' + d.source.y + ' L ' + d.target.x + ' ' + d.target.y;
    return path;
  });
  // 更新连线文字位置
  edgesText.attr('transform', (d, i) => {
    return 'rotate(0)';
  });
});

12.拖拽

function onDragStart(d) {
  // console.log('start');
  // console.log(d3.event.active);
  if (!d3.event.active) {
  simulation.alphaTarget(1) // 设置衰减系数，对节点位置移动过程的模拟，数值越高移动越快，数值范围[0，1]
   .restart(); // 拖拽节点后，重新启动模拟
  }
  d.fx = d.x;  // d.x是当前位置，d.fx是静止时位置
  d.fy = d.y;
}
function dragging(d) {
  d.fx = d3.event.x;
  d.fy = d3.event.y;
}
function onDragEnd(d) {
  if (!d3.event.active) simulation.alphaTarget(0);
  d.fx = null;    // 解除dragged中固定的坐标
  d.fy = null;
}
const drag = d3.drag()
  .on('start', onDragStart)
  .on('drag', dragging) // 拖拽过程
  .on('end', onDragEnd);

13.缩放

function onZoomStart(d) {
  // console.log('start zoom');
}
function zooming(d) {
  // 缩放和拖拽整个g
  // console.log('zoom ing', d3.event.transform, d3.zoomTransform(this));
  g.attr('transform', d3.event.transform); // 获取g的缩放系数和平移的坐标值。
}
function onZoomEnd() {
  // console.log('zoom end');
}
const zoom = d3.zoom()
  // .translateExtent([[0, 0], [WIDTH, HEIGHT]]) // 设置或获取平移区间, 默认为[[-∞, -∞], [+∞, +∞]]
  .scaleExtent([1 / 10, 10]) // 设置最大缩放比例
  .on('start', onZoomStart)
  .on('zoom', zooming)
  .on('end', onZoomEnd);

三、其它效果

1.单击节点时让连接线加粗

nodesCircle.on('click, (node) => {
  edges_line.style("stroke-width",function(line){
    if(line.source.name==node.name || line.target.name==node.name){
      return 4;
    }else{
      return 0.5;
    }
  });
})

2.被点击的节点变色

nodesCircle.on('click, (node) => {
  nodesCircle.style('fill', (nodeOfSelected) => { // nodeOfSelected：所有节点, node: 选中的节点
  if (nodeOfSelected.id === node.id) { // 被点击的节点变色
    console.log('node')
      return '#36F';
    } else {
      return '#9FF';
    }
  });
})

四、在react中使用注意事项

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(getDataFromNeo4J({
    neo4jrun: 'match p=(()-[r]-()) return p limit 300',
  }, callback));
}

在哪里构造图 因为图是动态的，如果渲染多次（render执行多次，渲染多次），不会覆盖前面渲染的图，反而会造成渲染多次，出现多个图的现象。把构造图的函数print()放到componentDidMount()内执行，则只会渲染一次。
对节点和连线数据进行增删改操作后，需要再次调用print()函数，重新构造图。

从哪里获取数据 数据不从redux获取，发送请求后callback直接获取。

五、干货：d3项目查找网址

D3js所有项目检索.http://blockbuilder.org/search/

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

内容总结

以上是互联网集市为您收集整理的详解如何在react中搭建d3力导向图全部内容，希望文章能够帮你解决详解如何在react中搭建d3力导向图所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/338851.html

来源：【匿名】

【上一篇】详解如何在React组件“外”使用父组件的Props 【下一篇】Reactv16.3.0:NewlifecyclesandcontextAPI

更多 ►

【详解如何在react中搭建d3力导向图】教程文章相关的互联网学习教程文章

reactjs入门到实战（一）---- jxs详解【代码】【图】

》》》如何转换 JSX transformer Babel 官网：http://babeljs.io/ 里面有一个可以看转换的测试器，es6什么的也可以应用：注意：jsx要用大写 class 、for 、style 、onChange 是不能用的关键词。style使用颜色的时候用 style = {{color:‘red‘,fontSize:20}} 》》》例子二：var Hello = React.createClass({render:function(){return(<span> Hello {this.props.name }!</span>);}});var props = {};props.name = "ch...

react-native-easy-app 详解与使用之（二） fetch【代码】【图】

react-native-easy-app 是一款为React Native App快速开发提供基础服务的纯JS库(支持 IOS & Android)，特别是在从0到1的项目搭建初期，至少可以为开发者减少30%的工作量。 react-native-easy-app 主要做了这些工作：1. 对AsyncStorage进行封装，开发者只需几行代码即可实现一个持久化数据管理器。2. 对fetch进行封装，使得开发者只需关注当前App的前后台交互逻辑和协议，定义好参数设置及解析逻辑即可。[3. 重新封装了RN的View、T...

React Native通过cocoaPods集成到现有工程详解【代码】

一、集成便利ReactNative对外提供一个ViewCocoaPods支持ReactNative二、集成需要环境CocoaPods - gem install cocoapodsNode.js - brew install node三、用CocosPod安装React项目的根目录下 Podfile 文件：platform:ios,‘7.0‘ use_frameworks! target ‘kugou’ do pod ‘React‘ pod ‘React/RCTText‘ pod ‘React/RCTWebSocket‘ end结果：四、工程配置引入SDK： User HeaderSearch Paths：五、创建ReactNative页面根 JavaSc...

React Native之this详解【代码】

this引起的错误详解我们在学习React Native的过程中，肯定经常遇见过undefined is not an object这样的问题吧，尤其是刚开始学习的时候，使用this.props或者this.setState的时候会报类似于如下错误：接下来我们来分析以下到底是什么原因造成的错误，根据错误的提示，找到报错的代码，我们会发现：报错的都是this.props.?或者this.setState(?),都是出现在有this的地方报错的原因是没有定义该对象，而我们都知...

ReactNative之Redux详解【代码】【图】

用redux有一段时间了，感觉还是有必要把其相关的知识点系统的总结一下的，毕竟好记性不如烂笔头。上篇博客更新了关于《ES6中的迭代器、Generator函数以及Generator函数的异步操作》的内容，该内容时saga的基础，稍后会总结saga相关知识点。循序渐进，本篇博客主要总结的是Redux相关的内容，然后下篇博客打算总结一下react-redux, 以及redux-thunk、redux-saga中间件。一、Redux与iOS中的Notification的比较Redux 的功能和作用就是...

React Native的props使用详解【代码】

普通传参传递 export default class App extends Component<> {constructor() {super();}render() {return (<View style={styles.container}><PropTest name = "呵呵"/></View>);} } 接收 export default class PropTest extends Component {render() {return <Text style={{fontSize: 28, color: ‘red‘}}>姓名:{this.props.name}</Text>} } 设置默认的参数子类组件 export default class PropTest extends Component {static de...

详解react中的state，props，refs【代码】

state state顾名思义就是状态，它只是用来控制这个组件本身自己的状态，我们可以用state来完成对行为的控制、数据的更新、界面的渲染，由于组件不能修改传入的props，所以需要记录自身的数据变化。那么，我们要如何修改state中的值呢？setState 时react用来修改state状态中的值的方法如何使用this.setState({　　key:value}) 这样就行了。props react中说的单向数据流值说的就是props，根据这一特点它还有一个作用：组件之间的通...

react-native-easy-app 详解与使用之（一） AsyncStorage【代码】【图】

React中setState使用详解【图】

这次给大家带来React中setState使用详解，React中setState使用的注意事项有哪些，下面就是实战案例，一起来看一下。抛出问题class Example extends Component {contructor () {super()this.state = {value: 0,index: 0}}componentDidMount () {this.setState({value: this.state.value + 1})console.log(this.state.value) // 第一次输出this.setState({value: this.state.value + 1})console.log(this.state.value) // 第二次输出...

React入门教程之Hello World以及环境搭建详解【图】

前言 React 是一个用于构建用户界面的 JavaScript 库。react主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）。关注React也已经很久了，一直没能系统地深入学习，最近准备好好研究一下，并且亲自动手做一些实践。不管是学习一门语言也好，还是学习一个框架也好，都是从最初的hello world程序开始的，今天我们也来用react写一个hello world出来，了解一下如何编写及运行React。入门教程及环境搭建在官方文档中，有一种方...

React中JSX语法使用详解

这次给大家带来React中JSX 语法使用详解，React中JSX 语法使用的注意事项有哪些，下面就是实战案例，一起来看一下。JSX 语法一种特殊的 js 语法糖，可以在代码中把 html 标签当对象使用，其可以总结成以下几个特点：不加任何引号以前在 js 中使用 html 标签都是加上引号当成字符串使用，而在 jsx 语法中不用加引号，直接当对象使用 var html = <h1>React</h1>;标签一定要有对应的结束标标签或结束标识：有时候我们在写 html 结构...

React中受控组件和非受控组件实例详解

本文我们将和大家分享React中受控组件和非受控组件实例详解，在详解之前我们会简单介绍一下什么是受控组件和非受控组件，希望能帮助到大家。受控组件在React中，每当表单的状态发生变化时，都会被写入到组件的state中，这种组件在React被称为受控组件。受控组件中，组件渲染的状态与它的value或者checked相对应。React通过这种方式消除了组件的局部状态。React官方推荐使用受控组件。受控组件更新state流程：1. 可以通过在初始stat...

React中props和state属性的用法详解（代码示例）

本篇文章给大家带来的内容是关于React中props和state属性的用法详解（代码示例），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。本篇文章主要介绍了React props和state属性的具体使用方法，具有一定的参考价值，对此有需要的朋友可以参考学习下。如有不足之处，欢迎批评指正。props不知道大家还记不记得xml标签中的属性，就像这样：<class id="1"><student id="1">John Kindem</student><student id="2">Alick ...

详解如何在React组件“外”使用父组件的Props

在写SDK项目的时候碰到一个问题：在直播间初始化SDK时使用默认主题，在专题页初始化SDK时使用其它主题。默认主题在打包时挂在全局环境下供多个页面使用，定制主题需要在初始化SDK的时候传入。实现起来很简单，判断是否有定制主题，有就使用定制主题，没有就使用默认主题。项目下的基本组件大多是这样的： import { h, Component } from lib/preact import csjs from lib/csjs import { theme } from lib/platformconst styles = c...

webpack2+React使用详解

这次给大家带来webpack2+React使用详解，webpack2+React使用的注意事项有哪些，下面就是实战案例，一起来看一下。1.涉及到的插件需要npm install安装；2.html-webpack-plugin创建服务于 webpack bundle 的 HTML 文件；3.clean-webpack-plugin清除dist目录重复的文件；4.extract-text-webpack-plugin分离css文件。var path = require(path); var webpack = require(webpack); var HtmlWebpackPlugin = require(html-webpack-plugin)...

REACT - 技术教程分类

React 教程 React 安装 React 元素渲染 React JSX React 组件 React State(状态) React Props React 事件处理 React 条件渲染 React 列表 & Keys React 组件生命周期 React AJAX React Refs react 全部

REACT - 最热教程

React如何从后端获取数据并渲染到前端？python基础教程：详解Python的Twisted框...详解各版本React路由的跳转的方法 react.js的批量添加与删除功能 Reactive-MongoDB 异步 Java Driver 解...Reactive Spring实战 -- 理解Reactor的...javascript – React Js – Flux中的状...java – Reactive Streams：Spring Web...javascript – 如何在ReactJS中重新加载...javascript – 在React JSX中使用if语句

首页 / REACT / 详解如何在react中搭建d3力导向图

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

内容导读

内容图文

D3js力导向图搭建

安装和导入

一、完整代码

二、拆解代码

三、其它效果

四、在react中使用注意事项

五、干货：d3项目查找网址

内容总结

内容备注

内容手机端

【详解如何在react中搭建d3力导向图】教程文章相关的互联网学习教程文章

reactjs入门到实战（一）---- jxs详解【代码】【图】

react-native-easy-app 详解与使用之（二） fetch【代码】【图】

React Native通过cocoaPods集成到现有工程详解【代码】

React Native之this详解【代码】

ReactNative之Redux详解【代码】【图】

React Native的props使用详解【代码】

详解react中的state，props，refs【代码】

react-native-easy-app 详解与使用之（一） AsyncStorage【代码】【图】

React中setState使用详解【图】

React入门教程之Hello World以及环境搭建详解【图】

React中JSX语法使用详解

React中受控组件和非受控组件实例详解

React中props和state属性的用法详解（代码示例）

详解如何在React组件“外”使用父组件的Props

webpack2+React使用详解

REACT - 相关标签

REACT - 技术教程分类

REACT - 最新教程

REACT - 最热教程