6.0 KiB
| title | order |
|---|---|
| Plugins and Tools | 5 |
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.
Now, we are goint to configure a minimap to Tutorial Demo.
Expected Effect
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.
预期效果
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
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
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
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.