Comment créer un graphe dirigé par la force d3 à l'aide de React (tutoriel détaillé)

Cet article présente principalement comment créer un graphe dirigé par la force d3 en réaction. Maintenant, je le partage avec vous et lui donne une référence.

Construction de graphes dirigés par force D3js

d3js est une bibliothèque JavaScript qui peut manipuler des documents basés sur des données. Les données peuvent être affichées en utilisant HTML, CSS, SVG et Canvas. Les graphiques dirigés par force peuvent être utilisés pour représenter des relations plusieurs-à-plusieurs entre les nœuds.

Effet de réussite : La ligne de connexion a une flèche. Cliquer sur un nœud peut changer la couleur du nœud et l'épaisseur de la ligne connectée, zoomer et faire glisser.

Version : 4.

Import frontal : importer * en tant que d3 depuis 'd3' ;

1. Code complet

2. Code démonté

1. Composant

L'image entière sera dessinée en p.

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) || &#39;&#39;,
     name: (nodeData[i] && nodeData[i].name) || &#39;&#39;,
     type: (nodeData[i] && nodeData[i].type) || &#39;&#39;,
     definition: (nodeData[i] && nodeData[i].definition) || &#39;&#39;,
    });
   }
   let edges = [];
   for (let i = 0; i < relationData.length; i++) {
    edges.push({
     id: (relationData[i] && (relationData[i].id)) || &#39;&#39;,
     source: (relationData[i] && relationData[i].start.id) || &#39;&#39;,
     target: (relationData[i] && relationData[i].end.id) || &#39;&#39;,
     tag: (relationData[i] && relationData[i].name) || &#39;&#39;,
    });
   }
   this.forceChart(nodes, edges); // d3力导向图内容
  };
  this.props.dispatch(chartReq({ param: param }, callback));
 }

 // func
 forceChart(nodes, edges) {
  this.refs[&#39;theChart&#39;].innerHTML = &#39;&#39;;

  // 函数内其余代码请看拆解代码
  }

   render() {
  
    return (
     <Row style={{ minWidth: 900 }}>
      <p className="outerp">
       <p className="theChart" id="theChart" ref="theChart">
  
       </p>
      </p>
     </Row>
    );
   }
  }

  Chart.propTypes = {
   dispatch: PropTypes.func.isRequired,
  };
  
  function mapStateToProps(state) {
   return {
  
   };
  }
  
  const WrappedChart = Form.create({})(Chart);
  export default connect(mapStateToProps)(WrappedChart);

2. Construisez des nœuds et des connexions

La structure spécifique est basée sur les données de votre projet.

<p className="theChart" id="theChart" ref="theChart">
</p>

3. Définissez le modèle de force

Définissez la force via simulation.force() Vous pouvez définir ces types de forces :

let nodes = []; // 节点
for (let i = 0; i < nodeData.length; i++) {
  nodes.push({
    id: （nodeData[i] && nodeData[i].id） || &#39;&#39;,
    name: (nodeData[i] && nodeData[i].name) || &#39;&#39;, // 节点名称
  });
}
let edges = []; // 连线
for (let i = 0; i < relationData.length; i++) {
  edges.push({
    id: (relationData[i] && (relationData[i].id)) || &#39;&#39;,
    source: (relationData[i] && relationData[i].start.id） || &#39;&#39;, // 开始节点
    target: (relationData[i] && relationData[i].end.id） || &#39;&#39;, // 结束节点
    tag: (relationData[i] && relationData[i].name) || &#39;&#39;, // 连线名称
  });
}

Centrage : Force de centrage, définit la position du point central du graphique.

Collision : force de collision du nœud, la plage des paramètres .strength est [0, 1].

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));

Liens : La force de la connexion ; .distance définit la distance entre les nœuds aux deux extrémités de la connexion.

1. Many-Body : Lorsque le paramètre .strength est positif, il simule la gravité, lorsqu'il est négatif, il simule la force de charge ; le paramètre .distanceMax définit la distance maximale ;

2. Positionnement : Étant donné une force dans une certaine direction.
3. Surveillez les changements de position des éléments de l'audiogramme via simulation.on.

4. Dessinez SVG
Créez SVG, créez g dans SVG et placez les connexions de nœuds et autres contenus à l'intérieur de g.

select : Sélectionnez le premier élément correspondant

selectAll : Sélectionnez tous les éléments correspondants

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

append : Créer un élément

5. Tracez la ligne de connexion
La ligne de connexion est tracée avec la courbe de Bézier : (M point de départ X Point de départ y L Point d'arrivée x Point d'arrivée y)

3. 6. Dessinez la flèche sur la ligne de connexion

fenêtre d'affichage : visible. zone

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); // 粗细

viewBox : taille réelle, sera automatiquement mise à l'échelle pour remplir la fenêtre

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

7. Dessinez des nœuds
Créez des cercles comme nœuds.

2. .call() appelle la fonction glisser.

8. Nom du nœud

Étant donné que le texte se trouve sur la couche supérieure du nœud, si l'événement de souris n'est pas désactivé, cliquer sur le texte ne le fera pas. répondre à l'effet de cliquer sur le nœud, et ne peut pas non plus faire glisser le nœud.

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); // 拖拽单个节点带动整个图

9. Nom de la connexion

10. Lorsque la souris est déplacée vers le nœud, une invite de bulle apparaît

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
  })；

.

11. Surveillez les changements de position des éléments de l'image

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; });

12. Faites glisser

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

13. Zoom

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)';
  });
});

3. Autres effets

1. Rendre la ligne de connexion plus épaisse lorsque vous cliquez sur un nœud

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);

2. Le nœud cliqué change de couleur

4. Précautions lors de l'utilisation de React

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);

Où construire le graphique

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;
    }
  });
})

Parce que le graphique est dynamique, s'il est rendu plusieurs fois (le rendu est exécuté plusieurs fois et rendu plusieurs fois), ce qui n'écrasera pas l'image précédemment rendue, mais entraînera l'apparition de plusieurs rendus et de plusieurs images. Si vous placez la fonction print() du diagramme de construction dans composantDidMount() et que vous l'exécutez, elle ne sera rendue qu'une seule fois.

Après avoir ajouté, supprimé ou modifié les données de nœud et de connexion, vous devez à nouveau appeler la fonction print() pour reconstruire le graphique.

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

Où obtenir les données ? Les données ne sont pas obtenues à partir de redux Le rappel les obtient directement après l'envoi de la requête.

5. Informations essentielles : URL de recherche de projet d3

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） || &#39;&#39;,
        name: (nodeData[i] && nodeData[i].name) || &#39;&#39;,
        type: (nodeData[i] && nodeData[i].type) || &#39;&#39;,
        definition: (nodeData[i] && nodeData[i].definition) || &#39;&#39;,
      });
    }
    let edges = [];
    for (let i = 0; i < relationData.length; i++) {
      edges.push({
        id: (relationData[i] && (relationData[i].id)) || &#39;&#39;,
        source: (relationData[i] && relationData[i].start.id） || &#39;&#39;,
        target: (relationData[i] && relationData[i].end.id） || &#39;&#39;,
        tag: (relationData[i] && relationData[i].name) || &#39;&#39;,
      });
    }
    this.forceChart(nodes, edges); // d3力导向图内容
  };
  this.props.dispatch(getDataFromNeo4J({
    neo4jrun: &#39;match p=(()-[r]-()) return p limit 300&#39;,
  }, callback));
}

D3js recherche de tous les projets http://blockbuilder.org/search/Ce qui précède est ce que j'ai compilé pour tout le monde. , j'espère que cela sera utile à tout le monde à l'avenir.

Articles connexes :

Comment obtenir un effet de rafraîchissement vers l'avant et de non-rafraîchissement vers l'arrière dans vue

Dans Vue2.5 via Table et Comment le composant Pagination implémente-t-il la fonction de pagination ?

Comment intégrer Bootstrap 4 dans Laravel ?

Comment obtenir la valeur de l'option dans la balise select dans jquery

Comment ajouter dynamiquement une option à sélectionner à l'aide de js (tutoriel détaillé)

Comment obtenir un effet de défilement transparent à l'aide de vue.js

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!