g6/demos/plugin-mapper.html

76 lines
1.7 KiB
HTML

<!doctype html>
<html itemscope="" itemtype="http://schema.org/SearchResultsPage" lang="en">
<head>
<meta content="origin" name="referrer">
<title>mapper</title>
<script src="../build/g6.js"></script>
<script src="../build/plugin.behaviour.analysis.js"></script>
<script src="../build/plugin.tool.mapper.js"></script>
<script src="./assets/jquery-3.2.1.min.js"></script>
</head>
<body>
<div id='mountNode'></div>
<div id='legend'></div>
<script>
const Mapper = G6.Plugins['tool.mapper']
const nodeColorMapper = new Mapper('node', 'class', 'color', ['#BAE7FF', '#0050B3', '#ff50B3'], {
legendCfg: {
layout: 'vertical'
}
});
const nodeSizeMapper = new Mapper('node', 'weight', 'size', [20, 40]);
const edgeSizeMapper = new Mapper('edge', 'weight', 'size', [2, 20], {
legendCfg: null
});
const data = {
nodes: [{
id: 'node1',
x: 100,
y: 200,
weight: 10,
class: 'class_1'
}, {
id: 'node2',
x: 300,
y: 200,
weight: 2,
class: 'class_1'
}, {
id: 'node3',
x: 100,
y: 100,
weight: 15,
class: 'class_2'
}, {
id: 'node4',
x: 300,
y: 100,
weight: 5,
class: 'class_3'
}],
edges: [{
target: 'node2',
source: 'node1',
weight: 5
}, {
target: 'node3',
source: 'node2',
weight: 20
}, {
target: 'node4',
source: 'node3',
weight: 50
}]
};
const graph = new G6.Graph({
id: 'mountNode', // dom id
plugins: [nodeColorMapper, edgeSizeMapper, nodeSizeMapper],
height: 1000,
});
graph.read(data);
</script>
</body>