1. What is force guided layout

  • Force to guide the layout model is to simulate the spring charge adds a repulsive force between every two nodes, each edge between two nodes added a gravity, each iteration nodes will move in the repulsive force and under the action of gravity position, after many iterations node static force balance in a position, to minimize the total energy of the model.

2. Guide layout with understanding of implementation results


  • The red arrow is the opposite of the repulsive force and the opposite of the gravitational force. All the nodes on the page are one energetic particle, and the interaction forces will eventually balance out, resulting in this symmetrical effect

3. Echarts configuration

    let option = {
      tooltip: {
        show: true.        formatter: "
         

          "
         
 + "{b} " + "</div>"
      },
 series: [{  type: 'graph'// Declare to draw the diagram layout: 'force'// Declare to draw the force guide diagram in the diagram symbolSize: 40,  draggable: true, // Whether the node can be dragged roam: true// Enable mouse zooming and panning focusNodeAdjacency: true, // Whether to highlight the node and its edges and adjacent nodes when the mouse moves over the node edgeSymbol: [' '.'arrow']. cursor: 'pointer'.Emphasis: {// Highlight the pattern of a mouse hover itemStyle: {  borderColor: 'black'. borderWidth: 1,  borderType: 'solid'. symbolSize: 40,  },  label: {  show: true. formatter: (record) => {  if (record.name.length > 10) {  return record.name.substr(0, 5) + '... '  } else {  return record.name  }  }  }  }, EdgeLabel: {// Sets the line label style normal: {  show: true. textStyle: {  fontSize: 12,  color: '#fff'  },  formatter(x) {  return x.data.name;  }  }  }, Label: {// Set the node label show: true. position: 'bottom'. color: '#fff'. formatter: (record) => {  console.log(record)  return 'nodes' + record.dataIndex  // if (record.name.length > 10) {  // return record.name.substr(0, 5) + '... '  // } else {  // return record.name  // }  }  }, Force: {// Force to boot configuration items related to layoutrepulsion: 80, // Repulsive factor between nodesGravity: 0.02, // The greater the gravity factor, the closer the node is to the centerEdgeLength: 240, // The distance between two nodes of an edge layoutAnimation: true// Display an iterative animation of the layout }, Nodes: Nodes, // Node data listLinks: links, // List of relational data }]  } Copy the code

4. Use echarts-for-react in the React project

  • Echarts-for-react is a visual plugin for echarts-for-React
  • NPM install –save echarts-for-react
  • import ReactEcharts from ‘echarts-for-react’; (Page introduction)
import ReactEcharts from 'echarts-for-react';

class GraphDemo extends React.Component {
   constructor(props) {
      super(props)
 this.ChartRef = React.createRef();  this.state = {  graphData: {  nodes: [],  links: [],  },  }  }  onclick = {  'click': this.clickEchartsPie.bind(this),  'dblclick': this.dblclickPie.bind(this),  'contextmenu': this.rightMouse.bind(this),  // 'mouseover': this.mouseoverNode.bind(this)  }  clickEchartsPie (e) {   }   getOption () {  let option = { . // }  return option  }  render () {  return <div>  <ReactEchart  ref={this.ChartRef}  onEvents={this.onclick}  style={{ height: '600px' }}  option={this.getOption(graphData)}  />  </div>  } }  Copy the code

5. Event binding

  • To accomplish some complex business logic on the graph, there are many events, such as click, double click, right click, mouse hover, etc
  • Echarts provides many mouse events, as shown

  • Echarts-for-react also provides a method for event binding, as shown in the following figure:

6. Zoom in and out and clear the atlas

  • To obtain an instance of the map, you can dynamically set the option and set the zoom of the map through the Zoom property
Enlarge / /  add() {
    let echartInstance = this.ChartRef.current.getEchartsInstance();
    let zoom = echartInstance.getOption().series[0].zoom;
Const addNum = 0.2; zoom += addNum  echartInstance.setOption({  series: {  zoom  }  })   } / / to narrow decrese() {  let echartInstance = this.ChartRef.current.getEchartsInstance();  let zoom = echartInstance.getOption().series[0].zoom; Const addNum = 0.2; zoom -= addNum  echartInstance.setOption({  series: {  zoom  }  })  } / / to empty clear () {  let echartInstance = this.ChartRef.current.getEchartsInstance(); Echartinstance.clear () // Clears the current instanceEchartinstance.dispose () // Dispose the instance } Copy the code

7. Conclusion

  • Knowing how to implement force-directed diagrams and how to bind events allows NAM to perform more complex business operations on top of this.

This article is formatted using MDNICE