g6/packages/site/docs/manual/tutorial/plugins.en.md

title	order
Plugins and Tools	5

This article will add the Minimap plugin and tooltip node prompt box to the Tutorial Example. When using plugins, there are three steps:

• Step 1: Import the plugin;
• Step 2: Register the plugin;
• Step 3: Configure the plugin instance on the graph when instantiating the graph.

Minimap

The Minimap is a common tool used for quick preview and exploration of graphs. It can serve as a navigation aid for users to explore large-scale graphs.

Now, let's configure a Minimap for the Tutorial Example:

Expected Result

Usage

The Minimap is one of the plugins provided by G6, but it is not registered in advance. It needs to be imported from Extensions and registered before being configured on the graph:

const { Graph as BaseGraph, extend, Extensions } = G6;
const ExtGraph = extend(BaseGraph, {
  // ... Other extension registrations
  // Plugin registration
  plugins: {
    minimap: Extensions.Minimap,
  }
});
// Instantiate the graph, note that the extended Graph is used here
const graph = new ExtGraph({
  // ... Other configurations
  plugins: [
    // If using default configurations, you can simply write a string 'minimap'
    {
      type: 'minimap',
      // ... Other configurations
    }
  ],
});

Tooltip

The tooltip node prompt box can be used to display detailed information about nodes. When the mouse hovers over a node, a floating layer is displayed to provide detailed information about the node. For more configurations, see Tooltip Plugin.

Expected Result

Usage

The Tooltip is one of the plugins provided by G6, but it is not registered in advance. It needs to be imported from Extensions and registered before being configured on the graph:

const { Graph as BaseGraph, extend, Extensions } = G6;
const ExtGraph = extend(BaseGraph, {
  // ... Other extension registrations
  // Plugin registration
  plugins: {
    minimap: Extensions.Minimap,
    tooltip: Extensions.Tooltip,
  }
});
// Instantiate the graph, note that the extended Graph is used here
const graph = new ExtGraph({
  // ... Other configurations
  plugins: [
    // If using default configurations, you can simply write a string 'minimap'
    'minimap',
    // If using default configurations, you can simply write a string 'tooltip'
    {
      type: "tooltip",
      key: "my-tooltip", // Unique identifier
      itemTypes: ["node"], // Only effective for nodes, can be configured as ['node', 'edge'] to make it effective for both nodes and edges
      getContent: (e) => { // Custom content
        const model = graph.getNodeData(e.itemId);
        return `ID: ${e.itemId}<br/>Degree: ${model.data.degree}`;
      }
      // ... Other configurations
    },
  ],
});

Complete Code

With this, the Tutorial Example is complete. The complete code can be found here: a href='https://codesandbox.io/s/g6-v5-tutorial-j67vnm?file=/index.js' target='_blank'>Tutorial Example Code.

⚠️ Note: 
If you need to replace the data, please replace  'https://raw.githubusercontent.com/antvis/G6/v5/packages/g6/tests/datasets/force-data.json' with the new data file address.