An overview of the

AntV G6 is a simple, easy to use, complete graph visualization engine, which provides a series of elegant design, easy to use graph visualization solutions based on high customization capabilities. It can help developers build their own graph visualization, graph analysis, or graph editor applications.

G6 is a pure JS library that is not coupled to any framework, which means it can be used in any front-end framework such as React, Vue, Angular, etc. Since most of us are currently based on the React stack, this article will only show you how to use G6 with React.

Using G6 in React is basically the same as using HTML, with the only key distinction being to ensure that the DOM container is rendered and the DOM elements are retrieved when instantiating Graph.

In the Demo, we use a simple flow chart as an example to achieve the following effect.

Functions and Implementation

Demo includes the following functions:

  • Custom node;
  • Custom edge;
  • The node’s tooltip;
  • The edge of the tooltip.
  • The right menu pops up above the node;
  • Tooltip and ContextMenu how to render custom React components.

In React, use ref.current to obtain real DOM elements. For details about React, see the React documentation.

import React, { useEffect, useState } from 'react';
import ReactDOM from 'react-dom';
import { data } from './data';
import G6 from '@antv/g6';

export default function () {
  const ref = React.useRef(null);
  let graph = null;

  useEffect(() = > {
    if(! graph) { graph =new G6.Graph({
        container: ref.current,
        width: 1200.height: 800.layout: {
          type: 'dagre'.direction: 'LR',}}); } graph.data(data); graph.render(); } []);return <div ref={ref}></div>;
}
Copy the code

Render the React component in G6

Tooltips for nodes and edges, right-click menus on nodes, and other features built into G6 are difficult to meet styling requirements, so we can render a custom React component instead. Tooltip and ContextMenu are common React components with styles completely controlled by the user. During interaction, all you need to do in G6 is determine when and where to render components. React State is used to manage the values of the render component and render location in G6. React takes care of the rest of the work.

// Edge tooltip coordinates
const [showNodeTooltip, setShowNodeTooltip] = useState(false);
const [nodeTooltipX, setNodeToolTipX] = useState(0);
const [nodeTooltipY, setNodeToolTipY] = useState(0);

// Listen for mouse events on node
graph.on('node:mouseenter'.(evt) = > {
  const { item } = evt;
  const model = item.getModel();
  const { x, y } = model;
  const point = graph.getCanvasByPoint(x, y);

  setNodeToolTipX(point.x - 75);
  setNodeToolTipY(point.y + 15);
  setShowNodeTooltip(true);
});

// Hide tooltip and ContextMenu when mouseleave is triggered on the node
graph.on('node:mouseleave'.() = > {
  setShowNodeTooltip(false);
});

return <div ref={ref}>{showNodeTooltip && <NodeTooltips x={nodeTooltipX} y={nodeTooltipY} />}</div>;
Copy the code

For full Demo source please click here.

AntV G6 is an open source graph visualization engine that focuses on graph visualization and graph analysis. Star G6 GitHub: github.com/antvis/G6 official website: g6.antv.vision/zh/

🏆 technology project phase iii | data visualization of those things…