mirror of
https://gitee.com/antv/g6.git
synced 2024-12-13 17:15:49 +08:00
Yellowthrough
GitHub
commit
0193f56e76
2
.babelrc
2
.babelrc
@ -2,7 +2,7 @@
|
||||
{
|
||||
"plugins": [
|
||||
"transform-object-rest-spread",
|
||||
"transform-remove-strict-mode",
|
||||
"transform-remove-strict-mode"
|
||||
],
|
||||
"presets": [
|
||||
[
|
||||
|
||||
134
demos/gallery-anchors-selection.html
Normal file
134
demos/gallery-anchors-selection.html
Normal file
@ -0,0 +1,134 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>画廊-多锚点选择</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="mountNode"></div>
|
||||
<script src="../build/g6.js"></script>
|
||||
<script src="../build/plugin.layout.dagre.js"></script>
|
||||
<script src="../build/plugin.edge.polyline.js"></script>
|
||||
<script>
|
||||
G6.registerNode('rect', {
|
||||
getPath(item) {
|
||||
const width = 100; // 一半宽
|
||||
const height = 40; // 一半高
|
||||
return G6.Util.getRectPath(-width/2, -height/2, width, height, 10);
|
||||
},
|
||||
anchor(node) {
|
||||
// const hierarchy = node.getHierarchy();
|
||||
const inEdges = node.getInEdges();
|
||||
const outEdges = node.getOutEdges();
|
||||
const inEdgesNum = inEdges.length;
|
||||
const outEdgesNum = outEdges.length;
|
||||
const inAnchorArea = 1 - 1 / (inEdgesNum + 1);
|
||||
const outAnchorArea = 1 - 1 / (outEdgesNum + 1);
|
||||
const inGap = inAnchorArea / inEdgesNum;
|
||||
const outGap = outAnchorArea / outEdgesNum;
|
||||
const inAnchors = getAnchors(inEdgesNum, inGap, 'in');
|
||||
const outAnchors = getAnchors(outEdgesNum, outGap, 'out');
|
||||
const anchor = inAnchors.concat(outAnchors);
|
||||
return anchor;
|
||||
}
|
||||
});
|
||||
const data = {
|
||||
nodes: [{
|
||||
id: '收集日志',
|
||||
}, {
|
||||
id: '入 es 集群',
|
||||
}, {
|
||||
id: '入 hdfs',
|
||||
},{
|
||||
id: '入 hdfs2',
|
||||
}, {
|
||||
id: 'hive 计算',
|
||||
},{
|
||||
id: 'report',
|
||||
}],
|
||||
edges: [{
|
||||
source: '收集日志',
|
||||
target: '入 es 集群'
|
||||
},{
|
||||
source: '收集日志',
|
||||
target: '入 hdfs'
|
||||
},{
|
||||
source: '收集日志',
|
||||
target: '入 hdfs2'
|
||||
},{
|
||||
source: '入 hdfs',
|
||||
target: 'hive 计算'
|
||||
},{
|
||||
source: '入 hdfs2',
|
||||
target: 'hive 计算'
|
||||
},{
|
||||
source: '入 es 集群',
|
||||
target: 'hive 计算'
|
||||
},{
|
||||
source: 'hive 计算',
|
||||
target: 'report'
|
||||
}]
|
||||
};
|
||||
const graph = new G6.Graph({
|
||||
container: 'mountNode',
|
||||
fitView: 'cc',
|
||||
width: 500,
|
||||
height: 500,
|
||||
plugins: [new G6.Plugins['layout.dagre']()],
|
||||
defaultIntersectBox: 'rect' // 使用矩形包围盒
|
||||
});
|
||||
graph.node({
|
||||
shape: 'rect',
|
||||
label(model) {
|
||||
return model.id;
|
||||
},
|
||||
style: {
|
||||
stroke: '#00C0A5',
|
||||
fill: '#92949F',
|
||||
fillOpacity: 0.45,
|
||||
lineWidth: 2
|
||||
}
|
||||
});
|
||||
graph.edge({
|
||||
shape: 'polyline',
|
||||
style: {
|
||||
endArrow: true,
|
||||
stroke: 'grey',
|
||||
lineWidth: 1,
|
||||
strokeOpacity: 1
|
||||
}
|
||||
});
|
||||
graph.read(data);
|
||||
|
||||
function getAnchors(edgesNum, gap, type){
|
||||
const anchors = [];
|
||||
let y;
|
||||
if(type === 'out') y = 1;
|
||||
else y = 0;
|
||||
|
||||
if(edgesNum % 2) { // odd number
|
||||
anchors.push([0.5, y]);
|
||||
for( let i = 1; i <= (edgesNum - 1) / 2; i += 1){
|
||||
anchors.push([0.5 - i * gap, y]);
|
||||
anchors.push([0.5 + i * gap, y]);
|
||||
}
|
||||
} else { // even number
|
||||
if (edgesNum != 0) {
|
||||
anchors.push([0.5 - gap / 2, y]);
|
||||
anchors.push([0.5 + gap / 2, y]);
|
||||
for( let i = 1; i <= (edgesNum - 2) / 2; i += 1){
|
||||
anchors.push([0.5 - gap / 2 - i * gap, y]);
|
||||
anchors.push([0.5 + gap / 2 + i * gap, y]);
|
||||
}
|
||||
}
|
||||
}
|
||||
return anchors
|
||||
}
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -18,9 +18,9 @@
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id='mountNode' style='background-color:rgb(57,64,77);width:736px'>
|
||||
<h3 style='color:white;margin:20pt;padding-top:20pt'>2018 世界杯关注度、胜负分析</h3>
|
||||
<p style='color:rgb(126,131,139);margin:20pt;margin-top:-10pt'>该图为 2018 年世界杯期间的相关数据。图上点越大代表该国球队关注的人数越多，连线代表双方有对战，箭头代表胜方，双箭头代表双方均有赢。</p>
|
||||
<div id='mountNode' style='background-color:rgb(57,64,77);position:absolute; width:736px; height:800px'>
|
||||
<h3 style='color:white; margin: 20pt 20pt 0pt; position: relative;'>2018 世界杯关注度、胜负分析</h3>
|
||||
<p style='color:rgb(126,131,139); margin:20px 100px 0px 22px'>该图为 2018 年世界杯期间的相关数据。图上点越大代表该国球队关注的人数越多，连线代表双方有对战，箭头代表胜方，双箭头代表双方均有赢。</p>
|
||||
</div>
|
||||
|
||||
<div id='legend'></div>
|
||||
@ -107,13 +107,13 @@
|
||||
img.src = './assets/data/footer.png';
|
||||
img.setAttribute('width', 130);
|
||||
img.style.setProperty('margin', '0pt');
|
||||
img.style.setProperty('margin-top', '-120pt');
|
||||
img.style.setProperty('margin-top', '400pt');
|
||||
img.style.setProperty('position', 'absolute');
|
||||
parent.appendChild(img);
|
||||
|
||||
var footer = document.createElement("a");
|
||||
footer.style.setProperty('margin', '20pt');
|
||||
footer.style.setProperty('margin-top', '-30pt');
|
||||
footer.style.setProperty('margin-top', '485pt');
|
||||
footer.style.setProperty('position', 'absolute');
|
||||
footer.style.setProperty('color', 'rgb(126,131,139)');
|
||||
footer.style.setProperty('text-decoration', 'none');
|
||||
|
||||
@ -100,9 +100,9 @@
|
||||
// });
|
||||
// });
|
||||
const minimap = document.getElementById('minimap');
|
||||
const legend = document.getElementById('legend');
|
||||
// const legend = document.getElementById('legend');
|
||||
if (minimap !== undefined) minimap.style.display = 'none';
|
||||
if (legend !== undefined) legend.style.display = 'none';
|
||||
// if (legend !== undefined) legend.style.display = 'none';
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
@ -71,7 +71,7 @@
|
||||
interactive: false,
|
||||
textDisplay: false,
|
||||
node_label: null,
|
||||
edge_style(model) {
|
||||
edgeStyle(model) {
|
||||
return {
|
||||
stroke: graph.find(model.target).getModel().color,
|
||||
strokeOpacity: 0.8
|
||||
|
||||
@ -98,7 +98,7 @@
|
||||
"screenshot": "node ./bin/screenshot.js",
|
||||
"start": "npm run dev",
|
||||
"test": "torch --compile --renderer --recursive ./test/unit",
|
||||
"test-live": "torch --compile --interactive --watch --recursive ./test/unit/",
|
||||
"test-live": "torch --compile --interactive --watch --recursive ./test/unit/plugins/tool.textDisplay-spec.js",
|
||||
"watch": "webpack --config webpack-dev.config.js",
|
||||
"win-dev": "node ./bin/win-dev.js"
|
||||
},
|
||||
|
||||
@ -159,27 +159,30 @@ class Layout {
|
||||
loading.style.setProperty('background-color', '#fff');
|
||||
loading.style.setProperty('position', 'absolute');
|
||||
const parent = graph.getGraphContainer().parentNode;
|
||||
loading.style.setProperty('width', parent.offsetWidth + 'px');
|
||||
loading.style.setProperty('height', parent.offsetHeight + 'px');
|
||||
loading.style.setProperty('margin-top', (-parent.offsetHeight) + 'px');
|
||||
const divHeight = parent.offsetHeight ? parent.offsetHeight : 600;
|
||||
const divWidth = parent.offsetWidth ? parent.offsetWidth : 600;
|
||||
loading.style.setProperty('width', divWidth + 'px');
|
||||
loading.style.setProperty('height', divHeight + 'px');
|
||||
loading.style.setProperty('margin-top', 0 + 'px');// (-parent.offsetHeight)s
|
||||
loading.style.zIndex = 999;
|
||||
parent.appendChild(loading);
|
||||
// the loading image
|
||||
const imgSize = 200;
|
||||
const loadingImg = document.createElement('img');
|
||||
loadingImg.src = 'https://gw.alipayobjects.com/zos/rmsportal/mnEmjOmrHbghTsZNeTmI.gif';
|
||||
loadingImg.style.setProperty('width', 200 + 'px');
|
||||
loadingImg.style.setProperty('height', 200 + 'px');
|
||||
const Cw = loadingImg.offsetWidth;
|
||||
loadingImg.style.setProperty('width', imgSize + 'px');
|
||||
loadingImg.style.setProperty('height', imgSize + 'px');
|
||||
const Cw = imgSize;
|
||||
const Pw = loading.offsetWidth;
|
||||
const left = (Pw - Cw) / 2;
|
||||
loadingImg.style.setProperty('margin-left', left + 'px');
|
||||
const Ch = loadingImg.offsetHeight;
|
||||
const Ch = imgSize;
|
||||
const Ph = loading.offsetHeight;
|
||||
const top = (Ph - Ch) / 2;
|
||||
loadingImg.style.setProperty('margin-top', top + 'px');
|
||||
loading.appendChild(loadingImg);
|
||||
|
||||
const worker = new Worker();// { type: 'module' }
|
||||
const worker = new Worker();
|
||||
worker.postMessage(obj);
|
||||
worker.onmessage = function(event) {
|
||||
this.nodes = event.data;
|
||||
|
||||
@ -37,21 +37,12 @@ class Plugin {
|
||||
callBack: 'showAll'
|
||||
}]
|
||||
},
|
||||
layout: {
|
||||
auto: 'once', // true false once
|
||||
processer: new Layout({
|
||||
layoutCfg: {
|
||||
kr: 120,
|
||||
kg: 8.0,
|
||||
mode: 'common',
|
||||
prevOverlapping: true,
|
||||
dissuadeHubs: false,
|
||||
maxIteration: 1000,
|
||||
barnesHut: true,
|
||||
ks: 0.1,
|
||||
ksmax: 10,
|
||||
tao: 0.1,
|
||||
...options.layoutCfg
|
||||
})
|
||||
barnesHut: true
|
||||
},
|
||||
fisheye: true,
|
||||
menu: null,
|
||||
@ -61,11 +52,22 @@ class Plugin {
|
||||
stroke: '#4F7DAB',
|
||||
strokeOpacity: 0.65
|
||||
},
|
||||
activedEdgeStyle: {
|
||||
endArrow: true,
|
||||
stroke: '#4C7295',
|
||||
strokeOpacity: 1
|
||||
},
|
||||
nodeStyle: {
|
||||
stroke: '#696969',
|
||||
strokeOpacity: 0.4,
|
||||
lineWidth: 1
|
||||
},
|
||||
activedNodeStyle: {
|
||||
stroke: '#fff',
|
||||
lineWidth: 1,
|
||||
shadowColor: '#6a80aa',
|
||||
shadowBlur: 20
|
||||
},
|
||||
node_label(model) {
|
||||
return {
|
||||
text: model.id,
|
||||
@ -75,12 +77,12 @@ class Plugin {
|
||||
};
|
||||
},
|
||||
interactive: true,
|
||||
textDisplay: true,
|
||||
...options
|
||||
});
|
||||
textDisplay: true
|
||||
}, options);
|
||||
}
|
||||
init() {
|
||||
const graph = this.graph;
|
||||
|
||||
const highlighter = new G6.Plugins['tool.highlightSubgraph']();
|
||||
if (this.fisheye) {
|
||||
const fisheye = new G6.Plugins['tool.fisheye']({
|
||||
@ -94,9 +96,17 @@ class Plugin {
|
||||
}
|
||||
graph.addPlugin(highlighter);
|
||||
graph.on('beforeinit', () => {
|
||||
const layout = graph.get('layout');
|
||||
let layout = graph.get('layout');
|
||||
if (!layout) {
|
||||
graph.set('layout', this.layout);
|
||||
const { kr, kg, prevOverlapping, maxIteration, barnesHut } = this.layoutCfg;
|
||||
layout = {
|
||||
auto: 'once', // true false once
|
||||
processer: new Layout({
|
||||
kr, kg, prevOverlapping,
|
||||
maxIteration, barnesHut
|
||||
})
|
||||
};
|
||||
graph.set('layout', layout);
|
||||
}
|
||||
this.graph.activeItem = item => {
|
||||
this.activeItem(item);
|
||||
@ -134,7 +144,9 @@ class Plugin {
|
||||
this.setStyle();
|
||||
this.interactive && this.setListener();
|
||||
const menuCfg = this.menuCfg;
|
||||
if (menuCfg !== null) {
|
||||
this.menu = new Menu({ menuCfg, graph });
|
||||
}
|
||||
});
|
||||
}
|
||||
setStyle() {
|
||||
@ -164,19 +176,10 @@ class Plugin {
|
||||
let style = {};
|
||||
let preStyle = {};
|
||||
if (item.type === 'node') {
|
||||
style = {
|
||||
stroke: '#fff',
|
||||
lineWidth: 1,
|
||||
shadowColor: '#6a80aa',
|
||||
shadowBlur: 20
|
||||
};
|
||||
style = this.activedNodeStyle;
|
||||
preStyle = this.nodeStyle;
|
||||
} else if (item.type === 'edge') {
|
||||
style = {
|
||||
endArrow: true,
|
||||
stroke: '#4C7295',
|
||||
strokeOpacity: 1
|
||||
};
|
||||
style = this.activedEdgeStyle;
|
||||
preStyle = this.edgeStyle;
|
||||
} else return;
|
||||
|
||||
@ -229,6 +232,7 @@ class Plugin {
|
||||
shape,
|
||||
item
|
||||
}) => {
|
||||
if (this.menuCfg !== null) {
|
||||
if (shape && item.isNode) {
|
||||
const menuX = item.getModel().x * graph.getMatrix()[0] + graph.getMatrix()[6];
|
||||
const menuY = item.getModel().y * graph.getMatrix()[0] + graph.getMatrix()[7];
|
||||
@ -237,7 +241,7 @@ class Plugin {
|
||||
} else {
|
||||
this.menu.hide();
|
||||
// restore the highlighted graph and hide the edges which are not tree edges.
|
||||
graph.restoreGraph();
|
||||
graph.unhighlightGraph();
|
||||
const edges = graph.getEdges();
|
||||
Util.each(edges, edge => {
|
||||
if (edge.isVisible() && !edge.getModel().isTreeEdge) {
|
||||
@ -246,6 +250,7 @@ class Plugin {
|
||||
});
|
||||
graph.draw();
|
||||
}
|
||||
}
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
@ -21,6 +21,7 @@ class Plugin {
|
||||
...this.options
|
||||
});
|
||||
graph.on('mousemove', Util.throttle(ev => {
|
||||
if (graph.destroyed) return;
|
||||
const nodes = graph.getNodes();
|
||||
const size = nodes.length;
|
||||
if (this.oriXs.length !== size) return;
|
||||
@ -34,6 +35,7 @@ class Plugin {
|
||||
);
|
||||
});
|
||||
const cacheLocation = Util.debounce(ev => {
|
||||
if (graph.destroyed) return;
|
||||
const nodes = graph.getNodes();
|
||||
const size = nodes.length;
|
||||
if (ev === undefined || ev.item === undefined) {
|
||||
@ -42,8 +44,9 @@ class Plugin {
|
||||
this.oriXs[i] = nodes[i].getModel().x;
|
||||
this.oriYs[i] = nodes[i].getModel().y;
|
||||
}
|
||||
} else if (ev.item.type !== 'node' || (!ev.updateModel.x && !ev.updateModel.y)) return;
|
||||
else {
|
||||
} else if (ev.item.type !== 'node' || (ev.updateModel.x === undefined && ev.updateModel.y === undefined)) {
|
||||
return;
|
||||
} else {
|
||||
const item = graph.find(ev.originModel.id);
|
||||
for (let i = 0; i < size; i++) {
|
||||
if (nodes[i].getModel().id === item.id) {
|
||||
|
||||
@ -16,13 +16,13 @@ class Tool {
|
||||
|
||||
/**
|
||||
* defualt zoom center
|
||||
* @type {object}
|
||||
* @type {array}
|
||||
*/
|
||||
center: [ 0, 0 ],
|
||||
|
||||
/**
|
||||
* defualt magnification factor
|
||||
* @type {object}
|
||||
* @type {number}
|
||||
*/
|
||||
d: 1.0
|
||||
}, options);
|
||||
|
||||
@ -8,7 +8,7 @@ interface:
|
||||
params:
|
||||
- hlItems: the items which will be highlighted
|
||||
|
||||
- restoreGraph()
|
||||
- unhighlightGraph()
|
||||
restore the graph to the un-lighlighted style.
|
||||
|
||||
## use
|
||||
|
||||
@ -32,11 +32,11 @@ class Plugin {
|
||||
init() {
|
||||
this.graph.on('afterinit', () => {
|
||||
this.graph.highlightSubgraph = this.highlightSubgraph;
|
||||
this.graph.restoreGraph = this.restoreGraph;
|
||||
this.graph.unhighlightGraph = this.unhighlightGraph;
|
||||
});
|
||||
}
|
||||
highlightSubgraph(hlItems) {
|
||||
this.restoreGraph();
|
||||
this.unhighlightGraph();
|
||||
// sort the group items
|
||||
const ns = hlItems.reNodes;
|
||||
const es = hlItems.reEdges;
|
||||
@ -95,7 +95,7 @@ class Plugin {
|
||||
});
|
||||
this.draw();
|
||||
}
|
||||
restoreGraph() {
|
||||
unhighlightGraph() {
|
||||
// hide the mask
|
||||
const items = this.getItems();
|
||||
let mask;
|
||||
|
||||
@ -21,7 +21,7 @@ Constructor parameters:
|
||||
simple use.
|
||||
|
||||
```js
|
||||
const Mapper = G6.Plugins['tool.mapper']
|
||||
const Mapper = G6.Plugins['tool.mapper'];
|
||||
const nodeColorMapper = new Mapper('node', 'class', 'color', ['#BAE7FF', '#0050B3'], {
|
||||
legendCfg: {
|
||||
scale: 0.5
|
||||
|
||||
@ -179,14 +179,14 @@ class Plugin {
|
||||
if (legendContainer === undefined) {
|
||||
if (containerId === undefined) {
|
||||
legendContainer = Util.createDOM('<div class="legend-container"></div>');
|
||||
const container = graph.getGraphContainer();
|
||||
container.appendChild(legendContainer);
|
||||
} else {
|
||||
legendContainer = document.getElementById(containerId);
|
||||
if (legendContainer === undefined || legendContainer === null) {
|
||||
throw new Error('please set the container for the graph !');
|
||||
}
|
||||
}
|
||||
const container = graph.getGraphContainer();
|
||||
container.appendChild(legendContainer);
|
||||
}
|
||||
|
||||
const canvas = new G.Canvas({
|
||||
@ -311,10 +311,11 @@ class Plugin {
|
||||
}
|
||||
}
|
||||
|
||||
const domainStep = (domain[domain.length - 1] - domain[0]) / (range.length - 1);
|
||||
const items = [];
|
||||
Util.each(range, (val, i) => {
|
||||
const percent = (domain[i] - scale.min) / (scale.max - scale.min);
|
||||
let itemText = domain[i];
|
||||
let itemText = domain[0] + domainStep * i;
|
||||
const percent = (itemText - domain[0]) / (domain[domain.length - 1] - domain[0]);
|
||||
if (legendCfg.formatter !== undefined && legendCfg.formatter !== null) {
|
||||
itemText = legendCfg.formatter(domain[i]);
|
||||
}
|
||||
|
||||
@ -24,13 +24,17 @@ class Plugin {
|
||||
textDisplay() {
|
||||
const graph = this.graph;
|
||||
const nodes = graph.getNodes();
|
||||
const scale = graph.getMatrix()[0];
|
||||
Util.each(nodes, node => {
|
||||
const label = node.getLabel();
|
||||
const model = node.getModel();
|
||||
const labelBox = label.getBBox();
|
||||
const labelWidth = labelBox.maxX - labelBox.minX;
|
||||
const nodeWidth = model.size * scale;
|
||||
const nodeBox = node.getBBox();
|
||||
let nodeWidth = nodeBox.maxX - nodeBox.minX;
|
||||
if (model.size === undefined) {
|
||||
const nodeBox = node.getBBox();
|
||||
nodeWidth = nodeBox.maxX - nodeBox.minX;
|
||||
}
|
||||
if (labelWidth === 0) return;
|
||||
const ratio = labelWidth / nodeWidth;
|
||||
if (ratio > 2) {
|
||||
|
||||
@ -49,22 +49,6 @@ const extractSubgraph = {
|
||||
reNodes,
|
||||
reEdges
|
||||
};
|
||||
},
|
||||
setZIndex(ns, es, minZ) {
|
||||
const graph = this.graph;
|
||||
const nodes = graph.getNodes();
|
||||
const edges = graph.getEdges();
|
||||
Util.each(nodes, node => {
|
||||
Util.each(ns, n => {
|
||||
if (node.id === n.id) node.getGraphicGroup().setSilent('zIndex', minZ + 2);
|
||||
});
|
||||
});
|
||||
Util.each(edges, edge => {
|
||||
Util.each(es, e => {
|
||||
if (edge.id === e.id) edge.getGraphicGroup().setSilent('zIndex', minZ + 1);
|
||||
});
|
||||
});
|
||||
graph.getItemGroup().sort();
|
||||
}
|
||||
};
|
||||
Util.mix(Util, extractSubgraph);
|
||||
|
||||
328
test/unit/plugins/tool.fisheye-spec.js
Normal file
328
test/unit/plugins/tool.fisheye-spec.js
Normal file
@ -0,0 +1,328 @@
|
||||
const G6 = require('../../../src/index');
|
||||
const expect = require('chai').expect;
|
||||
const Simulate = require('event-simulate');
|
||||
const Fisheye = require('../../../plugins/tool.fisheye/');
|
||||
|
||||
describe('fisheye test', () => {
|
||||
const fisheye = new Fisheye();
|
||||
const data = {
|
||||
nodes: [{
|
||||
id: 'node1',
|
||||
x: 100,
|
||||
y: 200,
|
||||
weight: 10
|
||||
}, {
|
||||
id: 'node2',
|
||||
x: 300,
|
||||
y: 200,
|
||||
weight: 100
|
||||
}, {
|
||||
id: 'node3',
|
||||
x: 0,
|
||||
y: -200,
|
||||
weight: 100
|
||||
}],
|
||||
edges: [{
|
||||
target: 'node2',
|
||||
source: 'node1'
|
||||
}, {
|
||||
target: 'node2',
|
||||
source: 'node3'
|
||||
}]
|
||||
};
|
||||
const div = document.createElement('div');
|
||||
div.id = 'fisheyeMountNode';
|
||||
document.body.appendChild(div);
|
||||
const graph = new G6.Graph({
|
||||
container: div,
|
||||
width: 500,
|
||||
height: 500,
|
||||
plugins: [ fisheye ]
|
||||
});
|
||||
const mouseEventWrapper = graph.getMouseEventWrapper();
|
||||
graph.read(data);
|
||||
|
||||
|
||||
it('fisheye mouse move on node test', () => {
|
||||
const node1Model = graph.find('node1').getModel();
|
||||
const clientPoint = graph.getClientPoint(node1Model);
|
||||
Simulate.simulate(mouseEventWrapper, 'mousedown', {
|
||||
clientX: clientPoint.x - 50,
|
||||
clientY: clientPoint.y
|
||||
});
|
||||
Simulate.simulate(mouseEventWrapper, 'mousemove', {
|
||||
clientX: clientPoint.x - 50,
|
||||
clientY: clientPoint.y
|
||||
});
|
||||
Simulate.simulate(mouseEventWrapper, 'mousemove', {
|
||||
clientX: clientPoint.x,
|
||||
clientY: clientPoint.y
|
||||
});
|
||||
Simulate.simulate(mouseEventWrapper, 'mousemove', {
|
||||
clientX: clientPoint.x - 100,
|
||||
clientY: clientPoint.y
|
||||
});
|
||||
expect([ node1Model.x, node1Model.y ]).eql([ 130, 200 ]);
|
||||
|
||||
graph.update('node3', {
|
||||
x: -50,
|
||||
y: -100
|
||||
});
|
||||
const node3Model = graph.find('node3').getModel();
|
||||
const clientPoint3 = graph.getClientPoint(node3Model);
|
||||
Simulate.simulate(mouseEventWrapper, 'mousedown', {
|
||||
clientX: clientPoint3.x,
|
||||
clientY: clientPoint3.y - 50
|
||||
});
|
||||
Simulate.simulate(mouseEventWrapper, 'mousemove', {
|
||||
clientX: clientPoint3.x,
|
||||
clientY: clientPoint3.y - 50
|
||||
});
|
||||
Simulate.simulate(mouseEventWrapper, 'mousemove', {
|
||||
clientX: clientPoint3.x,
|
||||
clientY: clientPoint3.y
|
||||
});
|
||||
expect([ node1Model.x, node1Model.y ]).eql([ 130, 200 ]);
|
||||
expect(div.childNodes.length).not.eql(0);
|
||||
});
|
||||
|
||||
it('fisheye after updating node to (0, 0) test1', done => {
|
||||
graph.update('node2', {
|
||||
x: 0,
|
||||
y: 0
|
||||
});
|
||||
setTimeout(() => {
|
||||
const node2Model = graph.find('node2').getModel();
|
||||
const clientPoint = graph.getClientPoint(node2Model);
|
||||
Simulate.simulate(mouseEventWrapper, 'mousedown', {
|
||||
clientX: clientPoint.x - 50,
|
||||
clientY: clientPoint.y
|
||||
});
|
||||
Simulate.simulate(mouseEventWrapper, 'mousemove', {
|
||||
clientX: clientPoint.x - 50,
|
||||
clientY: clientPoint.y
|
||||
});
|
||||
Simulate.simulate(mouseEventWrapper, 'mousemove', {
|
||||
clientX: clientPoint.x,
|
||||
clientY: clientPoint.y
|
||||
});
|
||||
expect(div.childNodes.length).not.eql(0);
|
||||
done();
|
||||
}, 100);
|
||||
});
|
||||
|
||||
it('fisheye after updating node to (0, 0) test2', done => {
|
||||
graph.update('node2', {
|
||||
x: 0,
|
||||
y: 0
|
||||
});
|
||||
setTimeout(() => {
|
||||
Simulate.simulate(mouseEventWrapper, 'mousedown', {
|
||||
clientX: 0 + 50,
|
||||
clientY: 0
|
||||
});
|
||||
Simulate.simulate(mouseEventWrapper, 'mousemove', {
|
||||
clientX: 0 + 50,
|
||||
clientY: 0
|
||||
});
|
||||
Simulate.simulate(mouseEventWrapper, 'mousemove', {
|
||||
clientX: 0,
|
||||
clientY: 0
|
||||
});
|
||||
expect(div.childNodes.length).not.eql(0);
|
||||
done();
|
||||
}, 100);
|
||||
});
|
||||
|
||||
it('fisheye after updating node to (0, -100)', done => {
|
||||
graph.update('node2', {
|
||||
x: 0,
|
||||
y: -100
|
||||
});
|
||||
setTimeout(() => {
|
||||
Simulate.simulate(mouseEventWrapper, 'mousedown', {
|
||||
clientX: 0 + 50,
|
||||
clientY: 100
|
||||
});
|
||||
Simulate.simulate(mouseEventWrapper, 'mousemove', {
|
||||
clientX: 0 + 50,
|
||||
clientY: 100
|
||||
});
|
||||
Simulate.simulate(mouseEventWrapper, 'mousemove', {
|
||||
clientX: 0,
|
||||
clientY: 100
|
||||
});
|
||||
expect(div.childNodes.length).not.eql(0);
|
||||
done();
|
||||
}, 100);
|
||||
});
|
||||
|
||||
|
||||
it('fisheye after updating node to red', done => {
|
||||
graph.update('node1', {
|
||||
color: 'red'
|
||||
});
|
||||
setTimeout(() => {
|
||||
const node1Model = graph.find('node1').getModel();
|
||||
const clientPoint = graph.getClientPoint(node1Model);
|
||||
Simulate.simulate(mouseEventWrapper, 'mousedown', {
|
||||
clientX: clientPoint.x - 50,
|
||||
clientY: clientPoint.y
|
||||
});
|
||||
Simulate.simulate(mouseEventWrapper, 'mousemove', {
|
||||
clientX: clientPoint.x - 50,
|
||||
clientY: clientPoint.y
|
||||
});
|
||||
Simulate.simulate(mouseEventWrapper, 'mousemove', {
|
||||
clientX: clientPoint.x,
|
||||
clientY: clientPoint.y
|
||||
});
|
||||
expect([ node1Model.x, node1Model.y ]).eql([ 130, 200 ]);
|
||||
expect(div.childNodes.length).not.eql(0);
|
||||
done();
|
||||
}, 100);
|
||||
});
|
||||
|
||||
it('graph destroy', () => {
|
||||
graph.destroy();
|
||||
expect(div.childNodes.length).equal(0);
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
describe('graph destroyed cacheLocation test', () => {
|
||||
const fisheye = new Fisheye();
|
||||
const data = {
|
||||
nodes: [{
|
||||
id: 'node1',
|
||||
x: 100,
|
||||
y: 200,
|
||||
weight: 10
|
||||
}, {
|
||||
id: 'node2',
|
||||
x: 300,
|
||||
y: 200,
|
||||
weight: 100
|
||||
}, {
|
||||
id: 'node3',
|
||||
x: 0,
|
||||
y: -200,
|
||||
weight: 100
|
||||
}],
|
||||
edges: [{
|
||||
target: 'node2',
|
||||
source: 'node1'
|
||||
}, {
|
||||
target: 'node2',
|
||||
source: 'node3'
|
||||
}]
|
||||
};
|
||||
const div = document.createElement('div');
|
||||
div.id = 'fisheyeMountNode1';
|
||||
document.body.appendChild(div);
|
||||
const graph = new G6.Graph({
|
||||
container: 'fisheyeMountNode1',
|
||||
width: 500,
|
||||
height: 500,
|
||||
plugins: [ fisheye ]
|
||||
});
|
||||
|
||||
const mouseEventWrapper = graph.getMouseEventWrapper();
|
||||
graph.read(data);
|
||||
graph.destroy();
|
||||
|
||||
it('fisheye mouse move on node', () => {
|
||||
Simulate.simulate(mouseEventWrapper, 'mousedown', {
|
||||
clientX: 100 - 50,
|
||||
clientY: 200
|
||||
});
|
||||
Simulate.simulate(mouseEventWrapper, 'mousemove', {
|
||||
clientX: 100 - 50,
|
||||
clientY: 200
|
||||
});
|
||||
Simulate.simulate(mouseEventWrapper, 'mousemove', {
|
||||
clientX: 100,
|
||||
clientY: 200
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
describe('graph destroyed mousemove test', () => {
|
||||
const fisheye = new Fisheye();
|
||||
const div = document.createElement('div');
|
||||
div.id = 'fisheyeMountNode2';
|
||||
document.body.appendChild(div);
|
||||
const graph = new G6.Graph({
|
||||
container: 'fisheyeMountNode2',
|
||||
width: 500,
|
||||
height: 500
|
||||
});
|
||||
|
||||
const mouseEventWrapper = graph.getMouseEventWrapper();
|
||||
graph.destroy();
|
||||
|
||||
it('fisheye mouse move on node', () => {
|
||||
Simulate.simulate(mouseEventWrapper, 'mousemove', {
|
||||
clientX: 100 - 50,
|
||||
clientY: 200
|
||||
});
|
||||
Simulate.simulate(mouseEventWrapper, 'mousemove', {
|
||||
clientX: 100,
|
||||
clientY: 200
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
describe('node position undefined test', () => {
|
||||
const fisheye = new Fisheye();
|
||||
const data = {
|
||||
nodes: [{
|
||||
id: 'node1'
|
||||
}, {
|
||||
id: 'node2'
|
||||
}, {
|
||||
id: 'node3'
|
||||
}],
|
||||
edges: [{
|
||||
target: 'node2',
|
||||
source: 'node1'
|
||||
}, {
|
||||
target: 'node2',
|
||||
source: 'node3'
|
||||
}]
|
||||
};
|
||||
const div = document.createElement('div');
|
||||
div.id = 'fisheyeMountNode3';
|
||||
document.body.appendChild(div);
|
||||
const graph = new G6.Graph({
|
||||
container: 'fisheyeMountNode3',
|
||||
width: 500,
|
||||
height: 500,
|
||||
plugins: [ fisheye ]
|
||||
});
|
||||
|
||||
const mouseEventWrapper = graph.getMouseEventWrapper();
|
||||
graph.read(data);
|
||||
|
||||
it('fisheye mouse move on node', () => {
|
||||
Simulate.simulate(mouseEventWrapper, 'mousedown', {
|
||||
clientX: 100 - 50,
|
||||
clientY: 200
|
||||
});
|
||||
Simulate.simulate(mouseEventWrapper, 'mousemove', {
|
||||
clientX: 100 - 50,
|
||||
clientY: 200
|
||||
});
|
||||
Simulate.simulate(mouseEventWrapper, 'mousemove', {
|
||||
clientX: 100,
|
||||
clientY: 200
|
||||
});
|
||||
});
|
||||
|
||||
it('graph destroy', () => {
|
||||
graph.destroy();
|
||||
expect(div.childNodes.length).equal(0);
|
||||
});
|
||||
});
|
||||
92
test/unit/plugins/tool.highlightSubgraph-spec.js
Normal file
92
test/unit/plugins/tool.highlightSubgraph-spec.js
Normal file
@ -0,0 +1,92 @@
|
||||
const G6 = require('../../../src/index');
|
||||
const Highlighter = require('../../../plugins/tool.highlightSubgraph/');
|
||||
const expect = require('chai').expect;
|
||||
|
||||
describe('highlight subgraph test', () => {
|
||||
const highlighter = new Highlighter();
|
||||
const data = {
|
||||
nodes: [{
|
||||
id: 'node1',
|
||||
x: 100,
|
||||
y: 200
|
||||
}, {
|
||||
id: 'node2',
|
||||
x: 300,
|
||||
y: 200
|
||||
}, {
|
||||
id: 'node3',
|
||||
x: 400,
|
||||
y: 200
|
||||
}],
|
||||
edges: [{
|
||||
target: 'node2',
|
||||
source: 'node1'
|
||||
}, {
|
||||
target: 'node3',
|
||||
source: 'node2'
|
||||
}]
|
||||
};
|
||||
const div = document.createElement('div');
|
||||
document.body.appendChild(div);
|
||||
const graph = new G6.Graph({
|
||||
container: div,
|
||||
width: 500,
|
||||
height: 500,
|
||||
plugins: [ highlighter ]
|
||||
});
|
||||
graph.read(data);
|
||||
|
||||
it('highlight', () => {
|
||||
const nodes = graph.getNodes();
|
||||
const edges = graph.getEdges();
|
||||
const reNodes = [ nodes[0], nodes[1] ];
|
||||
const reEdges = [ edges[0] ];
|
||||
graph.highlightSubgraph({
|
||||
reNodes,
|
||||
reEdges
|
||||
});
|
||||
const items = graph.getItems();
|
||||
let mask;
|
||||
G6.Util.each(items, i => {
|
||||
if (i.type === 'guide') {
|
||||
mask = i;
|
||||
return;
|
||||
}
|
||||
});
|
||||
expect(mask.isVisible()).eql(true);
|
||||
});
|
||||
it('unhighlight', () => {
|
||||
graph.unhighlightGraph();
|
||||
const items = graph.getItems();
|
||||
let mask;
|
||||
G6.Util.each(items, i => {
|
||||
if (i.type === 'guide') {
|
||||
mask = i;
|
||||
return;
|
||||
}
|
||||
});
|
||||
expect(mask.isVisible()).eql(false);
|
||||
});
|
||||
it('highlight again', () => {
|
||||
const nodes = graph.getNodes();
|
||||
const reNodes = [ nodes[0] ];
|
||||
const reEdges = [ ];
|
||||
graph.highlightSubgraph({
|
||||
reNodes,
|
||||
reEdges
|
||||
});
|
||||
const items = graph.getItems();
|
||||
let mask;
|
||||
G6.Util.each(items, i => {
|
||||
if (i.type === 'guide') {
|
||||
mask = i;
|
||||
return;
|
||||
}
|
||||
});
|
||||
expect(mask.isVisible()).eql(true);
|
||||
});
|
||||
it('graph destroy', () => {
|
||||
graph.destroy();
|
||||
expect(div.childNodes.length).equal(0);
|
||||
});
|
||||
});
|
||||
@ -45,8 +45,10 @@ describe('node size mapper test', () => {
|
||||
source: 'node1'
|
||||
}]
|
||||
};
|
||||
const div = document.createElement('div');
|
||||
document.body.appendChild(div);
|
||||
const graph = new G6.Graph({
|
||||
container: 'mountNode',
|
||||
container: div,
|
||||
width: 500,
|
||||
height: 500,
|
||||
plugins: [ nodeSizeMapper ]
|
||||
@ -65,7 +67,7 @@ describe('node size mapper test', () => {
|
||||
});
|
||||
it('legend destroy', () => {
|
||||
graph.destroy();
|
||||
expect(document.getElementById('nodeSizeLegend')).eql(null);
|
||||
expect(document.getElementById('nodeSizeLegend').innerHTML).eql(originInnerHTML);
|
||||
});
|
||||
});
|
||||
|
||||
@ -98,8 +100,10 @@ describe('node color mapper domain length test', () => {
|
||||
source: 'node1'
|
||||
}]
|
||||
};
|
||||
const div = document.createElement('div');
|
||||
document.body.appendChild(div);
|
||||
const graph = new G6.Graph({
|
||||
container: 'mountNode',
|
||||
container: div,
|
||||
width: 500,
|
||||
height: 500,
|
||||
plugins: [ nodeSizeMapper ]
|
||||
@ -140,8 +144,10 @@ describe('node color mapper domian equals 1 test', () => {
|
||||
source: 'node1'
|
||||
}]
|
||||
};
|
||||
const div = document.createElement('div');
|
||||
document.body.appendChild(div);
|
||||
const graph = new G6.Graph({
|
||||
container: 'mountNode',
|
||||
container: div,
|
||||
width: 500,
|
||||
height: 500,
|
||||
plugins: [ nodeSizeMapper ]
|
||||
@ -158,7 +164,7 @@ describe('node color mapper domian equals 1 test', () => {
|
||||
});
|
||||
it('legend destroy', () => {
|
||||
graph.destroy();
|
||||
expect(document.getElementById('nodeColorLegend1')).eql(null);
|
||||
expect(document.getElementById('nodeColorLegend1').innerHTML).eql(originInnerHTML);
|
||||
});
|
||||
});
|
||||
|
||||
@ -193,8 +199,10 @@ describe('node color mapper domian equals 0 test', () => {
|
||||
source: 'node1'
|
||||
}]
|
||||
};
|
||||
const div = document.createElement('div');
|
||||
document.body.appendChild(div);
|
||||
const graph = new G6.Graph({
|
||||
container: 'mountNode',
|
||||
container: div,
|
||||
width: 500,
|
||||
height: 500,
|
||||
plugins: [ nodeSizeMapper ]
|
||||
@ -211,7 +219,7 @@ describe('node color mapper domian equals 0 test', () => {
|
||||
});
|
||||
it('legend destroy', () => {
|
||||
graph.destroy();
|
||||
expect(document.getElementById('nodeColorLegend2')).eql(null);
|
||||
expect(document.getElementById('nodeColorLegend2').innerHTML).eql(originInnerHTML);
|
||||
});
|
||||
});
|
||||
|
||||
@ -242,8 +250,10 @@ describe('node color mapper domian equals -1 test', () => {
|
||||
source: 'node1'
|
||||
}]
|
||||
};
|
||||
const div = document.createElement('div');
|
||||
document.body.appendChild(div);
|
||||
const graph = new G6.Graph({
|
||||
container: 'mountNode',
|
||||
container: div,
|
||||
width: 500,
|
||||
height: 500,
|
||||
plugins: [ nodeSizeMapper ]
|
||||
@ -260,7 +270,7 @@ describe('node color mapper domian equals -1 test', () => {
|
||||
});
|
||||
it('legend destroy', () => {
|
||||
graph.destroy();
|
||||
expect(document.getElementById('nodeColorLegend3')).eql(null);
|
||||
expect(document.getElementById('nodeColorLegend3').innerHTML).eql(originInnerHTML);
|
||||
});
|
||||
});
|
||||
|
||||
@ -293,8 +303,10 @@ describe('edge size mapper test', () => {
|
||||
weight: 2
|
||||
}]
|
||||
};
|
||||
const div = document.createElement('div');
|
||||
document.body.appendChild(div);
|
||||
const graph = new G6.Graph({
|
||||
container: 'mountNode',
|
||||
container: div,
|
||||
width: 500,
|
||||
height: 500,
|
||||
plugins: [ edgeSizeMapper ]
|
||||
@ -309,6 +321,9 @@ describe('edge size mapper test', () => {
|
||||
expect(size1).eql(10);
|
||||
expect(size2).eql(50);
|
||||
});
|
||||
it('legend destroy', () => {
|
||||
graph.destroy();
|
||||
});
|
||||
});
|
||||
|
||||
describe('edge size mapper vertical test', () => {
|
||||
@ -341,8 +356,10 @@ describe('edge size mapper vertical test', () => {
|
||||
weight: 2
|
||||
}]
|
||||
};
|
||||
const div = document.createElement('div');
|
||||
document.body.appendChild(div);
|
||||
const graph = new G6.Graph({
|
||||
container: 'mountNode',
|
||||
container: div,
|
||||
width: 500,
|
||||
height: 500,
|
||||
plugins: [ edgeSizeMapper ]
|
||||
@ -383,8 +400,10 @@ describe('node color category mapper test', () => {
|
||||
source: 'node1'
|
||||
}]
|
||||
};
|
||||
const div = document.createElement('div');
|
||||
document.body.appendChild(div);
|
||||
const graph = new G6.Graph({
|
||||
container: 'mountNode',
|
||||
container: div,
|
||||
width: 500,
|
||||
height: 500,
|
||||
plugins: [ nodeColoreMapper ]
|
||||
@ -401,7 +420,7 @@ describe('node color category mapper test', () => {
|
||||
});
|
||||
it('legend destroy', () => {
|
||||
graph.destroy();
|
||||
expect(document.getElementById('nodeColorCatLegend')).eql(null);
|
||||
expect(document.getElementById('nodeColorCatLegend').innerHTML).eql(originInnerHTML);
|
||||
});
|
||||
});
|
||||
|
||||
@ -430,8 +449,10 @@ describe('node size mapper with formatter test', () => {
|
||||
source: 'node1'
|
||||
}]
|
||||
};
|
||||
const div = document.createElement('div');
|
||||
document.body.appendChild(div);
|
||||
const graph = new G6.Graph({
|
||||
container: 'mountNode',
|
||||
container: div,
|
||||
width: 500,
|
||||
height: 500,
|
||||
plugins: [ nodeSizeMapper ]
|
||||
@ -472,8 +493,10 @@ describe('container undefined test', () => {
|
||||
source: 'node1'
|
||||
}]
|
||||
};
|
||||
const div = document.createElement('div');
|
||||
document.body.appendChild(div);
|
||||
const graph = new G6.Graph({
|
||||
container: 'mountNode',
|
||||
container: div,
|
||||
width: 500,
|
||||
height: 500,
|
||||
plugins: [ nodeSizeMapper ]
|
||||
@ -511,8 +534,10 @@ describe('slider test', () => {
|
||||
source: 'node1'
|
||||
}]
|
||||
};
|
||||
const div = document.createElement('div');
|
||||
document.body.appendChild(div);
|
||||
const graph = new G6.Graph({
|
||||
container: 'mountNode',
|
||||
container: div,
|
||||
width: 500,
|
||||
height: 500,
|
||||
plugins: [ nodeSizeMapper ]
|
||||
|
||||
75
test/unit/plugins/tool.textDisplay-spec.js
Normal file
75
test/unit/plugins/tool.textDisplay-spec.js
Normal file
@ -0,0 +1,75 @@
|
||||
const G6 = require('../../../src/index');
|
||||
const TextDisplay = require('../../../plugins/tool.textDisplay/');
|
||||
const expect = require('chai').expect;
|
||||
|
||||
describe('text display test', () => {
|
||||
const textDisplay = new TextDisplay();
|
||||
const data = {
|
||||
nodes: [{
|
||||
id: 'node1',
|
||||
x: 100,
|
||||
y: 200,
|
||||
name: 'node1'
|
||||
}, {
|
||||
id: 'node2',
|
||||
x: 300,
|
||||
y: 200,
|
||||
name: ''
|
||||
}, {
|
||||
id: 'node3',
|
||||
x: 400,
|
||||
y: 200,
|
||||
name: 'node3node3node3node3node3node3node3node3node3node3node3node3node3node3'
|
||||
}],
|
||||
edges: [{
|
||||
target: 'node2',
|
||||
source: 'node1'
|
||||
}, {
|
||||
target: 'node3',
|
||||
source: 'node2'
|
||||
}]
|
||||
};
|
||||
const div = document.createElement('div');
|
||||
document.body.appendChild(div);
|
||||
const graph = new G6.Graph({
|
||||
container: div,
|
||||
width: 500,
|
||||
height: 500,
|
||||
plugins: [ textDisplay ]
|
||||
});
|
||||
graph.node({
|
||||
label(model) {
|
||||
return {
|
||||
text: model.name,
|
||||
stroke: '#fff',
|
||||
lineWidth: 4
|
||||
};
|
||||
}
|
||||
});
|
||||
graph.read(data);
|
||||
|
||||
it('graph change view port', () => {
|
||||
graph.emit('afterviewportchange', {});
|
||||
|
||||
const node1 = graph.find('node1');
|
||||
const node1label = node1.getLabel();
|
||||
const node3 = graph.find('node3');
|
||||
const node3label = node3.getLabel();
|
||||
expect(node1label.get('visible')).eql(true);
|
||||
expect(node3label.get('visible')).eql(false);
|
||||
});
|
||||
it('graph zoom', () => {
|
||||
graph.emit('afterzoom', {});
|
||||
|
||||
const node1 = graph.find('node1');
|
||||
const node1label = node1.getLabel();
|
||||
const node3 = graph.find('node3');
|
||||
const node3label = node3.getLabel();
|
||||
expect(node1label.get('visible')).eql(true);
|
||||
expect(node3label.get('visible')).eql(false);
|
||||
});
|
||||
it('graph destroy', () => {
|
||||
graph.destroy();
|
||||
expect(div.childNodes.length).equal(0);
|
||||
});
|
||||
});
|
||||
69
test/unit/plugins/util.extractSubgraph-spec.js
Normal file
69
test/unit/plugins/util.extractSubgraph-spec.js
Normal file
@ -0,0 +1,69 @@
|
||||
const G6 = require('../../../src/index');
|
||||
const Extractor = require('../../../plugins/util.extractSubgraph/');
|
||||
const expect = require('chai').expect;
|
||||
const Util = G6.Util;
|
||||
|
||||
describe('extract subgraph test', () => {
|
||||
const data = {
|
||||
nodes: [{
|
||||
id: 'node1',
|
||||
x: 100,
|
||||
y: 200
|
||||
}, {
|
||||
id: 'node2',
|
||||
x: 300,
|
||||
y: 200
|
||||
}, {
|
||||
id: 'node3',
|
||||
x: 400,
|
||||
y: 200
|
||||
}],
|
||||
edges: [{
|
||||
target: 'node2',
|
||||
source: 'node1'
|
||||
}, {
|
||||
target: 'node3',
|
||||
source: 'node2'
|
||||
}]
|
||||
};
|
||||
const div = document.createElement('div');
|
||||
document.body.appendChild(div);
|
||||
const graph = new G6.Graph({
|
||||
container: div,
|
||||
width: 500,
|
||||
height: 500
|
||||
});
|
||||
graph.read(data);
|
||||
|
||||
it('double direction subgraph about node2', () => {
|
||||
const node = graph.find('node2');
|
||||
const {
|
||||
reNodes,
|
||||
reEdges
|
||||
} = Util.extract(graph, 'bi', 1, [ node ]);
|
||||
expect(reNodes.length).eql(3);
|
||||
expect(reEdges.length).eql(2);
|
||||
});
|
||||
it('in direction subgraph about node2', () => {
|
||||
const node = graph.find('node2');
|
||||
const {
|
||||
reNodes,
|
||||
reEdges
|
||||
} = Util.extract(graph, 'in', 1, [ node ]);
|
||||
expect(reNodes.length).eql(2);
|
||||
expect(reEdges.length).eql(1);
|
||||
});
|
||||
it('out direction subgraph about node2', () => {
|
||||
const node = graph.find('node2');
|
||||
const {
|
||||
reNodes,
|
||||
reEdges
|
||||
} = Util.extract(graph, 'out', 1, [ node ]);
|
||||
expect(reNodes.length).eql(2);
|
||||
expect(reEdges.length).eql(1);
|
||||
});
|
||||
it('graph destroy', () => {
|
||||
graph.destroy();
|
||||
expect(div.childNodes.length).equal(0);
|
||||
});
|
||||
});
|
||||
Loading…
Reference in New Issue
Block a user