Teilen Sie die Methode zum Erstellen eines d3-Kraftdiagramms in React

In diesem Artikel wird hauptsächlich beschrieben, wie ein d3-kraftgesteuertes Diagramm in React erstellt wird. Der Herausgeber findet es recht gut, daher werde ich es jetzt mit Ihnen teilen und als Referenz verwenden. Folgen wir dem Editor, um einen Blick darauf zu werfen. Ich hoffe, er kann allen helfen 🎜>

d3js ist eine JavaScript-Bibliothek, die Dokumente basierend auf Daten manipulieren kann. Daten können mit HTML, CSS, SVG und Canvas angezeigt werden. Kraftgerichtete Graphen können verwendet werden, um Viele-zu-Viele-Beziehungen zwischen Knoten darzustellen.

Erfolgseffekt: Es gibt Pfeile in der Verbindung. Durch Klicken auf einen Knoten können Sie die Farbe des Knotens und die Dicke der verbundenen Linie ändern, zoomen und ziehen. Version: 4. npm install d3

Front-End-Import: * als d3 aus 'd3' importieren;

1. Vollständiger Code

2. Demontagecode

1 >

Das gesamte Bild wird in S. gezeichnet.

2. Knoten und Verbindungen konstruieren

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

Die konkrete Konstruktion hängt von Ihren Projektdaten ab .

3. Definieren Sie das Kraftmodell

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

Stellen Sie die Kraft durch simulation.force( ), Sie können diese Arten von Kräften einstellen:

Zentrierung: Zentrierungskraft, legen Sie die Position des Mittelpunkts der Figur fest.

Kollision: Knotenkollisionskraft, .Strength-Parameterbereich ist [0, 1].

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;, // 连线名称
  });
}

Links: Die Stärke der Verbindung. .distance legt den Abstand zwischen den Knoten an beiden Enden der Verbindung fest.

Many-Body: Wenn der .strength-Parameter positiv ist, simuliert er die Schwerkraft, wenn er negativ ist, simuliert er die Ladungskraft; der .distanceMax-Parameter legt die maximale Entfernung fest.

Positionierung: Gegeben eine Kraft in eine bestimmte Richtung.

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

Überwachen Sie die Positionsänderungen von Audiogrammelementen durch simulation.on.

1. 4. SVG zeichnen

3. SVG erstellen, g in SVG erstellen und Knoten Verbindungen und andere Inhalte werden in g platziert.

4. select: Das erste entsprechende Element auswählen

selectAll: Alle entsprechenden Elemente auswählen

append : Elemente erstellen

5. Verbindungslinien zeichnen

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

Die Verbindungslinie wird mit einer Bezier-Kurve gezeichnet: (M Startpunkt

2. Ansichtsfenster: sichtbarer Bereich

3. viewBox: tatsächliche Größe, wird automatisch skaliert, um das Ansichtsfenster auszufüllen

7. Knoten zeichnen

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

Kreise als Knoten erstellen.

.call() ruft die Drag-Funktion auf.

8. Knotenname

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

2. Da sich der Text auf der oberen Ebene befindet Knoten, wenn kein Verbot festgelegt ist. Mausereignisse, das Klicken auf Text reagiert nicht auf den Effekt des Klickens auf Knoten und Knoten können nicht gezogen werden.

   
   

9. Verbindungsname

10 Knoten Es gibt Blasenaufforderungen

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

11. Überwachen Sie die Positionsänderungen der Bildelemente

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

12 . Zoom

3 Andere Effekte

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

1 Knoten

2. Der angeklickte Knoten ändert seine Farbe

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

4. Hinweise zur Verwendung in React

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

Wo soll das Diagramm erstellt werden
Da das Diagramm dynamisch ist , wenn das Rendern mehrmals ausgeführt wird (das Rendern wird mehrmals ausgeführt und mehrmals gerendert), wird das zuvor gerenderte Bild nicht überschrieben, sondern es werden mehrere Renderings und mehrere Bilder angezeigt. Wenn Sie die Funktion print() des Konstruktionsdiagramms in ComponentDidMount() einfügen und ausführen, wird sie nur einmal gerendert.

Nachdem Sie Knoten- und Verbindungsdaten hinzugefügt, gelöscht oder geändert haben, müssen Sie die Funktion print() erneut aufrufen, um das Diagramm wiederherzustellen.

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

Woher bekomme ich die Daten?
Die Daten werden nicht direkt nach dem Absenden der Anfrage von Redux bezogen.

Verwandte Empfehlungen:

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

So implementieren Sie die kraftgesteuerte Graphfokussierung von d3

Einführung in die Methode zur Tabellenerstellung mit D3.js

ID3v1-Informationen von MP3-Dateien mit Python lesen und schreiben

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

Das obige ist der detaillierte Inhalt vonTeilen Sie die Methode zum Erstellen eines d3-Kraftdiagramms in React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!