g6/demos/plugin-highlight-subgraph.html
2018-08-06 11:56:17 +08:00

66 lines
1.5 KiB
HTML

<!doctype html>
<html itemscope="" itemtype="http://schema.org/SearchResultsPage" lang="en">
<head>
<meta content="origin" name="referrer">
<title>highlight subgraph</title>
<script src="../build/g6.js"></script>
<script src="../build/plugin.behaviour.analysis.js"></script>
<script src="../build/plugin.tool.highlightSubgraph.js"></script>
<script src="./assets/jquery-3.2.1.min.js"></script>
</head>
<body>
<div id='mountNode'></div>
<script>
const Highlighter = G6.Plugins['tool.highlightSubgraph'];
const highlighter = new Highlighter();
const data = {
nodes: [{
id: 'node1',
x: 100,
y: 200
}, {
id: 'node2',
x: 300,
y: 200
}, {
id: 'node3',
x: 100,
y: 100
}, {
id: 'node4',
x: 300,
y: 100
}],
edges: [{
target: 'node2',
source: 'node1'
}, {
target: 'node3',
source: 'node2'
}, {
target: 'node4',
source: 'node3'
}, {
target: 'node1',
source: 'node4'
}, ]
};
const graph = new G6.Graph({
id: 'mountNode', // dom id
plugins: [highlighter],
height: 1000,
});
graph.read(data);
const nodes = graph.getNodes();
const edges = graph.getEdges();
const reNodes = [nodes[0], nodes[1]];
const reEdges = [edges[0]];
graph.highlightSubgraph({
reNodes,
reEdges
});
</script>
</body>