Plugins and Tools

4 min read

To assist user to exploration a graph, G6 provides some tools, including plugins and interaction tools.

Now, we are going to add minimap, grid, node tooltip, and edge tooltip to Tutorial Demo.

Plugin

Apply plugins with three steps:
  Step 1: Import the plugin;
  Step 2: Instantiate the plugin;
  Step 3: Configure plugin onto the instance of Graph.

Minimap

Minimap is a tool for quick preview and exploration on large graph.

img

Now, we are goint to configure a minimap to Tutorial Demo.

Expected Effect

img

Usage

In G6, Minimap is a plugin. You only need to instantiate it and configure the minimap onto the instance of Graph:

// Instantiate the Minimap
const minimap = new G6.Minimap({
  size: [100, 100],
  className: 'minimap',
  type: 'delegate',
});

// Instantiate the Graph
const graph = new G6.Graph({
  // ...                           // Other configurations
  plugins: [minimap], // Configure minimap to the graph
});

Image Minimap

The theory of the Minimap is copy the graphics from the main graph onto the canvas of the minimap, which will lead to double rendering cost. To alleviate this problem, G6 provides another Image Minimap which is drawn by one <img /> instead of canvas. But you have to provide the graphImg which is the url or base64 string of the main graph's screenshot image, and the image is controlled by yourself totally, which means you might need to update the image by calling minimap.updateGraphImg manually when the content of the main graph is changed.

预期效果

img

Usage

graphImg is required when instantiating the Image Minimap. Update the graphImg for the minimap. We recommand you to update the graphImg when the main graph is updated.

// Instantiate the Image Minimap plugin
const imageMinimap = new G6.ImageMinimap({
  width: 200,
  graphImg: 'https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*eD7nT6tmYgAAAAAAAAAAAABkARQnAQ'
});
const graph = new G6.Graph({
  //... Other configurations
  plugins: [imageMinimap], // Configure imageMinimap
});

graph.data(data);
graph.render()

... // Some operations which update the main graph
imageMinimap.updateGraphImg(img); // Update the minimap's image (generated by yourself)

Grid

Grid helps to align the node while user drags it.

Expected Effect

img

Usage Configure it onto the graph:

// const minimap = ...

// Instantiate grid
const grid = new G6.Grid();

// Instantiate the Graph
const graph = new G6.Graph({
  // ...                        // Other configurations
  plugins: [minimap, grid], // Configure grid onto the graph
});

Interaction Tool

Interaction tools assist user interact a graph. Two steps are required:
  Step 1: Configure modes when instantiating a graph;
  Step 2: Define the styles for the tools.

Tooltip for Node

Node tooltip shows the detail information when mouse enters a node. More configurations are in Built-in tooltip.

Expected Effect

img

Usage

Configure 'tooltip' to modes when instantiating the Graph:

const graph = new G6.Graph({
  modes: {
    default: [
      // ...
      {
        type: 'tooltip', // Tooltip
        formatText(model) {
          // The content of tooltip
          const text = 'label: ' + model.label + '<br/> class: ' + model.class;
          return text;
        },
      },
    ],
  },
});

Actually, tooltip is a floating <div> tag of HTML. Thus, you can define the CSS style for it in <style> tag:

<head>
  <meta charset="UTF-8" />
  <title>Tutorial Demo</title>

  <style>
    /* The style of the tooltip */
    .g6-tooltip {
      border: 1px solid #e2e2e2;
      border-radius: 4px;
      font-size: 12px;
      color: #545454;
      background-color: rgba(255, 255, 255, 0.9);
      padding: 10px 8px;
      box-shadow: rgb(174, 174, 174) 0px 0px 10px;
    }
  </style>
</head>

Tooltip for Edge

Edge tooltip shows the detail information when mouse enters a edge. More configurations are in Built-in edge-tooltip.

Expected Effect

img

Usage

const graph = new G6.Graph({
  modes: {
    default: [
      // ...
      {
        type: 'tooltip', // Node tooltip
        // ...
      },
      {
        type: 'edge-tooltip', // Edge tooltip
        formatText(model) {
          // The content of the edge tooltip
          const text =
            'source: ' +
            model.source +
            '<br/> target: ' +
            model.target +
            '<br/> weight: ' +
            model.weight;
          return text;
        },
      },
    ],
  },
});

The same as node tooltip, edge-tooltip is a floating <div> tag in HTML. Thus, you can define the CSS style for it in <style> tag:

Complete Code

Tutorial Demo is done now. For complete code, see: Code of Tutorial Demo.

⚠️Attention: 
Replace the url 'https://gw.alipayobjects.com/os/basement_prod/6cae02ab-4c29-44b2-b1fd-4005688febcb.json' to change the data into yours.