mirror of
https://gitee.com/antv/g6.git
synced 2024-12-04 12:49:04 +08:00
xiaoqing.dongxq
commit
6d1c1467d0
1
demos/assets/data/flare.json
Normal file
1
demos/assets/data/flare.json
Normal file
File diff suppressed because one or more lines are too long
@ -1,58 +1,58 @@
|
||||
{
|
||||
"name": "Modeling Methods",
|
||||
"id": "Modeling Methods",
|
||||
"children": [
|
||||
{
|
||||
"name": "Classification",
|
||||
"id": "Classification",
|
||||
"children": [
|
||||
{ "name": "Logistic regression" },
|
||||
{ "name": "Linear discriminant analysis" },
|
||||
{ "name": "Rules" },
|
||||
{ "name": "Decision trees" },
|
||||
{ "name": "Naive Bayes" },
|
||||
{ "name": "K nearest neighbor" },
|
||||
{ "name": "Probabilistic neural network" },
|
||||
{ "name": "Support vector machine" }
|
||||
{ "id": "Logistic regression" },
|
||||
{ "id": "Linear discriminant analysis" },
|
||||
{ "id": "Rules" },
|
||||
{ "id": "Decision trees" },
|
||||
{ "id": "Naive Bayes" },
|
||||
{ "id": "K nearest neighbor" },
|
||||
{ "id": "Probabilistic neural network" },
|
||||
{ "id": "Support vector machine" }
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "Consensus",
|
||||
"id": "Consensus",
|
||||
"children": [
|
||||
{
|
||||
"name": "Models diversity",
|
||||
"id": "Models diversity",
|
||||
"children": [
|
||||
{ "name": "Different initializations" },
|
||||
{ "name": "Different parameter choices" },
|
||||
{ "name": "Different architectures" },
|
||||
{ "name": "Different modeling methods" },
|
||||
{ "name": "Different training sets" },
|
||||
{ "name": "Different feature sets" }
|
||||
{ "id": "Different initializations" },
|
||||
{ "id": "Different parameter choices" },
|
||||
{ "id": "Different architectures" },
|
||||
{ "id": "Different modeling methods" },
|
||||
{ "id": "Different training sets" },
|
||||
{ "id": "Different feature sets" }
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "Methods",
|
||||
"id": "Methods",
|
||||
"children": [
|
||||
{ "name": "Classifier selection" },
|
||||
{ "name": "Classifier fusion" }
|
||||
{ "id": "Classifier selection" },
|
||||
{ "id": "Classifier fusion" }
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "Common",
|
||||
"id": "Common",
|
||||
"children": [
|
||||
{ "name": "Bagging" },
|
||||
{ "name": "Boosting" },
|
||||
{ "name": "AdaBoost" }
|
||||
{ "id": "Bagging" },
|
||||
{ "id": "Boosting" },
|
||||
{ "id": "AdaBoost" }
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "Regression",
|
||||
"id": "Regression",
|
||||
"children": [
|
||||
{ "name": "Multiple linear regression" },
|
||||
{ "name": "Partial least squares" },
|
||||
{ "name": "Multi-layer feedforward neural network" },
|
||||
{ "name": "General regression neural network" },
|
||||
{ "name": "Support vector regression" }
|
||||
{ "id": "Multiple linear regression" },
|
||||
{ "id": "Partial least squares" },
|
||||
{ "id": "Multi-layer feedforward neural network" },
|
||||
{ "id": "General regression neural network" },
|
||||
{ "id": "Support vector regression" }
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
1
demos/assets/energy.json
Normal file
1
demos/assets/energy.json
Normal file
@ -0,0 +1 @@
|
||||
{"nodes":[{"name":"Agricultural 'waste'"},{"name":"Bio-conversion"},{"name":"Liquid"},{"name":"Losses"},{"name":"Solid"},{"name":"Gas"},{"name":"Biofuel imports"},{"name":"Biomass imports"},{"name":"Coal imports"},{"name":"Coal"},{"name":"Coal reserves"},{"name":"District heating"},{"name":"Industry"},{"name":"Heating and cooling - commercial"},{"name":"Heating and cooling - homes"},{"name":"Electricity grid"},{"name":"Over generation / exports"},{"name":"H2 conversion"},{"name":"Road transport"},{"name":"Agriculture"},{"name":"Rail transport"},{"name":"Lighting & appliances - commercial"},{"name":"Lighting & appliances - homes"},{"name":"Gas imports"},{"name":"Ngas"},{"name":"Gas reserves"},{"name":"Thermal generation"},{"name":"Geothermal"},{"name":"H2"},{"name":"Hydro"},{"name":"International shipping"},{"name":"Domestic aviation"},{"name":"International aviation"},{"name":"National navigation"},{"name":"Marine algae"},{"name":"Nuclear"},{"name":"Oil imports"},{"name":"Oil"},{"name":"Oil reserves"},{"name":"Other waste"},{"name":"Pumped heat"},{"name":"Solar PV"},{"name":"Solar Thermal"},{"name":"Solar"},{"name":"Tidal"},{"name":"UK land based bioenergy"},{"name":"Wave"},{"name":"Wind"}],"links":[{"source":0,"target":1,"value":124.729},{"source":1,"target":2,"value":0.597},{"source":1,"target":3,"value":26.862},{"source":1,"target":4,"value":280.322},{"source":1,"target":5,"value":81.144},{"source":6,"target":2,"value":35},{"source":7,"target":4,"value":35},{"source":8,"target":9,"value":11.606},{"source":10,"target":9,"value":63.965},{"source":9,"target":4,"value":75.571},{"source":11,"target":12,"value":10.639},{"source":11,"target":13,"value":22.505},{"source":11,"target":14,"value":46.184},{"source":15,"target":16,"value":104.453},{"source":15,"target":14,"value":113.726},{"source":15,"target":17,"value":27.14},{"source":15,"target":12,"value":342.165},{"source":15,"target":18,"value":37.797},{"source":15,"target":19,"value":4.412},{"source":15,"target":13,"value":40.858},{"source":15,"target":3,"value":56.691},{"source":15,"target":20,"value":7.863},{"source":15,"target":21,"value":90.008},{"source":15,"target":22,"value":93.494},{"source":23,"target":24,"value":40.719},{"source":25,"target":24,"value":82.233},{"source":5,"target":13,"value":0.129},{"source":5,"target":3,"value":1.401},{"source":5,"target":26,"value":151.891},{"source":5,"target":19,"value":2.096},{"source":5,"target":12,"value":48.58},{"source":27,"target":15,"value":7.013},{"source":17,"target":28,"value":20.897},{"source":17,"target":3,"value":6.242},{"source":28,"target":18,"value":20.897},{"source":29,"target":15,"value":6.995},{"source":2,"target":12,"value":121.066},{"source":2,"target":30,"value":128.69},{"source":2,"target":18,"value":135.835},{"source":2,"target":31,"value":14.458},{"source":2,"target":32,"value":206.267},{"source":2,"target":19,"value":3.64},{"source":2,"target":33,"value":33.218},{"source":2,"target":20,"value":4.413},{"source":34,"target":1,"value":4.375},{"source":24,"target":5,"value":122.952},{"source":35,"target":26,"value":839.978},{"source":36,"target":37,"value":504.287},{"source":38,"target":37,"value":107.703},{"source":37,"target":2,"value":611.99},{"source":39,"target":4,"value":56.587},{"source":39,"target":1,"value":77.81},{"source":40,"target":14,"value":193.026},{"source":40,"target":13,"value":70.672},{"source":41,"target":15,"value":59.901},{"source":42,"target":14,"value":19.263},{"source":43,"target":42,"value":19.263},{"source":43,"target":41,"value":59.901},{"source":4,"target":19,"value":0.882},{"source":4,"target":26,"value":400.12},{"source":4,"target":12,"value":46.477},{"source":26,"target":15,"value":525.531},{"source":26,"target":3,"value":787.129},{"source":26,"target":11,"value":79.329},{"source":44,"target":15,"value":9.452},{"source":45,"target":1,"value":182.01},{"source":46,"target":15,"value":19.013},{"source":47,"target":15,"value":289.366}]}
|
||||
292
demos/assets/sankey.js
Normal file
292
demos/assets/sankey.js
Normal file
@ -0,0 +1,292 @@
|
||||
d3.sankey = function() {
|
||||
var sankey = {},
|
||||
nodeWidth = 24,
|
||||
nodePadding = 8,
|
||||
size = [1, 1],
|
||||
nodes = [],
|
||||
links = [];
|
||||
|
||||
sankey.nodeWidth = function(_) {
|
||||
if (!arguments.length) return nodeWidth;
|
||||
nodeWidth = +_;
|
||||
return sankey;
|
||||
};
|
||||
|
||||
sankey.nodePadding = function(_) {
|
||||
if (!arguments.length) return nodePadding;
|
||||
nodePadding = +_;
|
||||
return sankey;
|
||||
};
|
||||
|
||||
sankey.nodes = function(_) {
|
||||
if (!arguments.length) return nodes;
|
||||
nodes = _;
|
||||
return sankey;
|
||||
};
|
||||
|
||||
sankey.links = function(_) {
|
||||
if (!arguments.length) return links;
|
||||
links = _;
|
||||
return sankey;
|
||||
};
|
||||
|
||||
sankey.size = function(_) {
|
||||
if (!arguments.length) return size;
|
||||
size = _;
|
||||
return sankey;
|
||||
};
|
||||
|
||||
sankey.layout = function(iterations) {
|
||||
computeNodeLinks();
|
||||
computeNodeValues();
|
||||
computeNodeBreadths();
|
||||
computeNodeDepths(iterations);
|
||||
computeLinkDepths();
|
||||
return sankey;
|
||||
};
|
||||
|
||||
sankey.relayout = function() {
|
||||
computeLinkDepths();
|
||||
return sankey;
|
||||
};
|
||||
|
||||
sankey.link = function() {
|
||||
var curvature = .5;
|
||||
|
||||
function link(d) {
|
||||
var x0 = d.source.x + d.source.dx,
|
||||
x1 = d.target.x,
|
||||
xi = d3.interpolateNumber(x0, x1),
|
||||
x2 = xi(curvature),
|
||||
x3 = xi(1 - curvature),
|
||||
y0 = d.source.y + d.sy + d.dy / 2,
|
||||
y1 = d.target.y + d.ty + d.dy / 2;
|
||||
return "M" + x0 + "," + y0
|
||||
+ "C" + x2 + "," + y0
|
||||
+ " " + x3 + "," + y1
|
||||
+ " " + x1 + "," + y1;
|
||||
}
|
||||
|
||||
link.curvature = function(_) {
|
||||
if (!arguments.length) return curvature;
|
||||
curvature = +_;
|
||||
return link;
|
||||
};
|
||||
|
||||
return link;
|
||||
};
|
||||
|
||||
// Populate the sourceLinks and targetLinks for each node.
|
||||
// Also, if the source and target are not objects, assume they are indices.
|
||||
function computeNodeLinks() {
|
||||
nodes.forEach(function(node) {
|
||||
node.sourceLinks = [];
|
||||
node.targetLinks = [];
|
||||
});
|
||||
links.forEach(function(link) {
|
||||
var source = link.source,
|
||||
target = link.target;
|
||||
if (typeof source === "number") source = link.source = nodes[link.source];
|
||||
if (typeof target === "number") target = link.target = nodes[link.target];
|
||||
source.sourceLinks.push(link);
|
||||
target.targetLinks.push(link);
|
||||
});
|
||||
}
|
||||
|
||||
// Compute the value (size) of each node by summing the associated links.
|
||||
function computeNodeValues() {
|
||||
nodes.forEach(function(node) {
|
||||
node.value = Math.max(
|
||||
d3.sum(node.sourceLinks, value),
|
||||
d3.sum(node.targetLinks, value)
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
// Iteratively assign the breadth (x-position) for each node.
|
||||
// Nodes are assigned the maximum breadth of incoming neighbors plus one;
|
||||
// nodes with no incoming links are assigned breadth zero, while
|
||||
// nodes with no outgoing links are assigned the maximum breadth.
|
||||
function computeNodeBreadths() {
|
||||
var remainingNodes = nodes,
|
||||
nextNodes,
|
||||
x = 0;
|
||||
|
||||
while (remainingNodes.length) {
|
||||
nextNodes = [];
|
||||
remainingNodes.forEach(function(node) {
|
||||
node.x = x;
|
||||
node.dx = nodeWidth;
|
||||
node.sourceLinks.forEach(function(link) {
|
||||
nextNodes.push(link.target);
|
||||
});
|
||||
});
|
||||
remainingNodes = nextNodes;
|
||||
++x;
|
||||
}
|
||||
|
||||
//
|
||||
moveSinksRight(x);
|
||||
scaleNodeBreadths((width - nodeWidth) / (x - 1));
|
||||
}
|
||||
|
||||
function moveSourcesRight() {
|
||||
nodes.forEach(function(node) {
|
||||
if (!node.targetLinks.length) {
|
||||
node.x = d3.min(node.sourceLinks, function(d) { return d.target.x; }) - 1;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function moveSinksRight(x) {
|
||||
nodes.forEach(function(node) {
|
||||
if (!node.sourceLinks.length) {
|
||||
node.x = x - 1;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function scaleNodeBreadths(kx) {
|
||||
nodes.forEach(function(node) {
|
||||
node.x *= kx;
|
||||
});
|
||||
}
|
||||
|
||||
function computeNodeDepths(iterations) {
|
||||
var nodesByBreadth = d3.nest()
|
||||
.key(function(d) { return d.x; })
|
||||
.sortKeys(d3.ascending)
|
||||
.entries(nodes)
|
||||
.map(function(d) { return d.values; });
|
||||
|
||||
//
|
||||
initializeNodeDepth();
|
||||
resolveCollisions();
|
||||
for (var alpha = 1; iterations > 0; --iterations) {
|
||||
relaxRightToLeft(alpha *= .99);
|
||||
resolveCollisions();
|
||||
relaxLeftToRight(alpha);
|
||||
resolveCollisions();
|
||||
}
|
||||
|
||||
function initializeNodeDepth() {
|
||||
var ky = d3.min(nodesByBreadth, function(nodes) {
|
||||
return (size[1] - (nodes.length - 1) * nodePadding) / d3.sum(nodes, value);
|
||||
});
|
||||
|
||||
nodesByBreadth.forEach(function(nodes) {
|
||||
nodes.forEach(function(node, i) {
|
||||
node.y = i;
|
||||
node.dy = node.value * ky;
|
||||
});
|
||||
});
|
||||
|
||||
links.forEach(function(link) {
|
||||
link.dy = link.value * ky;
|
||||
});
|
||||
}
|
||||
|
||||
function relaxLeftToRight(alpha) {
|
||||
nodesByBreadth.forEach(function(nodes, breadth) {
|
||||
nodes.forEach(function(node) {
|
||||
if (node.targetLinks.length) {
|
||||
var y = d3.sum(node.targetLinks, weightedSource) / d3.sum(node.targetLinks, value);
|
||||
node.y += (y - center(node)) * alpha;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
function weightedSource(link) {
|
||||
return center(link.source) * link.value;
|
||||
}
|
||||
}
|
||||
|
||||
function relaxRightToLeft(alpha) {
|
||||
nodesByBreadth.slice().reverse().forEach(function(nodes) {
|
||||
nodes.forEach(function(node) {
|
||||
if (node.sourceLinks.length) {
|
||||
var y = d3.sum(node.sourceLinks, weightedTarget) / d3.sum(node.sourceLinks, value);
|
||||
node.y += (y - center(node)) * alpha;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
function weightedTarget(link) {
|
||||
return center(link.target) * link.value;
|
||||
}
|
||||
}
|
||||
|
||||
function resolveCollisions() {
|
||||
nodesByBreadth.forEach(function(nodes) {
|
||||
var node,
|
||||
dy,
|
||||
y0 = 0,
|
||||
n = nodes.length,
|
||||
i;
|
||||
|
||||
// Push any overlapping nodes down.
|
||||
nodes.sort(ascendingDepth);
|
||||
for (i = 0; i < n; ++i) {
|
||||
node = nodes[i];
|
||||
dy = y0 - node.y;
|
||||
if (dy > 0) node.y += dy;
|
||||
y0 = node.y + node.dy + nodePadding;
|
||||
}
|
||||
|
||||
// If the bottommost node goes outside the bounds, push it back up.
|
||||
dy = y0 - nodePadding - size[1];
|
||||
if (dy > 0) {
|
||||
y0 = node.y -= dy;
|
||||
|
||||
// Push any overlapping nodes back up.
|
||||
for (i = n - 2; i >= 0; --i) {
|
||||
node = nodes[i];
|
||||
dy = node.y + node.dy + nodePadding - y0;
|
||||
if (dy > 0) node.y -= dy;
|
||||
y0 = node.y;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function ascendingDepth(a, b) {
|
||||
return a.y - b.y;
|
||||
}
|
||||
}
|
||||
|
||||
function computeLinkDepths() {
|
||||
nodes.forEach(function(node) {
|
||||
node.sourceLinks.sort(ascendingTargetDepth);
|
||||
node.targetLinks.sort(ascendingSourceDepth);
|
||||
});
|
||||
nodes.forEach(function(node) {
|
||||
var sy = 0, ty = 0;
|
||||
node.sourceLinks.forEach(function(link) {
|
||||
link.sy = sy;
|
||||
sy += link.dy;
|
||||
});
|
||||
node.targetLinks.forEach(function(link) {
|
||||
link.ty = ty;
|
||||
ty += link.dy;
|
||||
});
|
||||
});
|
||||
|
||||
function ascendingSourceDepth(a, b) {
|
||||
return a.source.y - b.source.y;
|
||||
}
|
||||
|
||||
function ascendingTargetDepth(a, b) {
|
||||
return a.target.y - b.target.y;
|
||||
}
|
||||
}
|
||||
|
||||
function center(node) {
|
||||
return node.y + node.dy / 2;
|
||||
}
|
||||
|
||||
function value(link) {
|
||||
return link.value;
|
||||
}
|
||||
|
||||
return sankey;
|
||||
};
|
||||
125
demos/custom-tree-graph.html
Normal file
125
demos/custom-tree-graph.html
Normal file
@ -0,0 +1,125 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Title</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="mountNode"></div>
|
||||
<script src="assets/hierarchy.js"></script>
|
||||
<script src="../build/g6.js"></script>
|
||||
<script src="./assets/jquery-3.2.1.min.js"></script>
|
||||
<script>
|
||||
const COLLAPSE_ICON = function(x, y, r) {
|
||||
return [
|
||||
[ 'M', x, y ],
|
||||
[ 'a', r, r, 0, 1, 0, r * 2, 0],
|
||||
[ 'a', r, r, 0, 1, 0, -r * 2, 0],
|
||||
[ 'M', x + 2, y ],
|
||||
[ 'L', x + 2 * r - 2, y]
|
||||
];
|
||||
}
|
||||
const EXPAND_ICON = function(x, y, r) {
|
||||
return [
|
||||
[ 'M', x, y ],
|
||||
[ 'a', r, r, 0, 1, 0, r * 2, 0],
|
||||
[ 'a', r, r, 0, 1, 0, -r * 2, 0],
|
||||
[ 'M', x + 2, y ],
|
||||
[ 'L', x + 2 * r - 2, y],
|
||||
[ 'M', x + r, y - r + 2 ],
|
||||
[ 'L', x + r, y + r - 2 ]
|
||||
]
|
||||
};
|
||||
G6.registerNode('tree-node', {
|
||||
drawShape(cfg, group) {
|
||||
const rect = group.addShape('rect', {
|
||||
attrs: { fill: '#fff', stroke: '#666' }
|
||||
});
|
||||
const content = cfg.id.replace(/(.{19})/g,'$1\n');
|
||||
const text = group.addShape('text', {
|
||||
attrs: {
|
||||
text: content,
|
||||
x: 0,
|
||||
y: 0,
|
||||
textAlign: 'left',
|
||||
textBaseline: 'middle',
|
||||
fill: '#666'
|
||||
}
|
||||
});
|
||||
const bbox = text.getBBox();
|
||||
const hasChildren = cfg.data.children && cfg.data.children.length > 0;
|
||||
if (hasChildren) {
|
||||
group.addShape('marker', {
|
||||
attrs: {
|
||||
x: bbox.maxX + 6,
|
||||
y: bbox.minX + bbox.height / 2 - 6,
|
||||
r: 6,
|
||||
symbol: COLLAPSE_ICON,
|
||||
stroke: '#666',
|
||||
lineWidth: 2
|
||||
},
|
||||
className: 'collapse-icon'
|
||||
});
|
||||
}
|
||||
rect.attr({
|
||||
x: bbox.minX - 4,
|
||||
y: bbox.minY - 6,
|
||||
width: bbox.width + ( hasChildren ? 26 : 8),
|
||||
height: bbox.height + 12});
|
||||
return rect;
|
||||
}
|
||||
}, 'single-shape');
|
||||
const graph = new G6.TreeGraph({
|
||||
container: 'mountNode',
|
||||
width: 800,
|
||||
height: 600,
|
||||
modes: {
|
||||
default: [{
|
||||
type: 'collapse-expand',
|
||||
onChange(item, collapsed) {
|
||||
const data = item.get('model').data;
|
||||
const icon = item.get('group').findByClassName('collapse-icon');
|
||||
if (collapsed) {
|
||||
icon.attr('symbol', EXPAND_ICON);
|
||||
} else {
|
||||
icon.attr('symbol', COLLAPSE_ICON);
|
||||
}
|
||||
data.collapsed = collapsed;
|
||||
return true;
|
||||
}
|
||||
}, 'drag-canvas']
|
||||
},
|
||||
edgeStyle: {
|
||||
default: {
|
||||
stroke: '#A3B1BF'
|
||||
}
|
||||
},
|
||||
layout: data => {
|
||||
return Hierarchy.compactBox(data, {
|
||||
direction: 'LR',
|
||||
getId(d) { return d.id; },
|
||||
getHeight() { return 16; },
|
||||
getWidth() { return 16; },
|
||||
getVGap() { return 20; },
|
||||
getHGap() { return 80; }
|
||||
});
|
||||
}
|
||||
});
|
||||
$.getJSON('./assets/data/modeling-methods.json', data => {
|
||||
graph.data(data);
|
||||
graph.render();
|
||||
graph.getNodes().forEach(node => {
|
||||
const model = node.get('model');
|
||||
model.anchorPoints = [ [0, 0.5], [1, 0.5] ];
|
||||
model.shape = 'tree-node';
|
||||
});
|
||||
graph.getEdges().forEach((edge) => {
|
||||
edge.get('model').shape = 'cubic-horizontal';
|
||||
});
|
||||
graph.refresh();
|
||||
graph.fitView();
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
229
demos/er-diagram.html
Normal file
229
demos/er-diagram.html
Normal file
@ -0,0 +1,229 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Title</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="mountNode"></div>
|
||||
<script src="../build/g6.js"></script>
|
||||
<script>
|
||||
|
||||
G6.registerEdge('relation', {
|
||||
draw(cfg, group) {
|
||||
const keyShape = group.addShape('path', {
|
||||
attrs: {
|
||||
path: [
|
||||
[ 'M', cfg.startPoint.x, cfg.startPoint.y ],
|
||||
[ 'L', cfg.endPoint.x, cfg.endPoint.y ]
|
||||
],
|
||||
stroke: '#666',
|
||||
lineWidth: 2,
|
||||
lineAppendWidth: 4
|
||||
}
|
||||
});
|
||||
const center = keyShape.getPoint(0.5);
|
||||
const points = keyShape.getStartTangent();
|
||||
const angle = Math.atan((points[1][1] - points[0][1]) / (points[1][0] - points[0][0]));
|
||||
const shapeContainer = group.addGroup();
|
||||
shapeContainer.transform([
|
||||
['t', -center.x, -center.y],
|
||||
['r', angle],
|
||||
['t', center.x, center.y]
|
||||
]);
|
||||
shapeContainer.addShape('text', {
|
||||
attrs: {
|
||||
text: cfg.sourceEntity,
|
||||
x: center.x - 50,
|
||||
y: center.y,
|
||||
fill: '#666'
|
||||
}
|
||||
});
|
||||
shapeContainer.addShape('text', {
|
||||
attrs: {
|
||||
text: cfg.targetEntity,
|
||||
x: center.x + 50,
|
||||
y: center.y,
|
||||
fill: '#666'
|
||||
}
|
||||
});
|
||||
shapeContainer.addShape('path', {
|
||||
attrs: {
|
||||
path: [
|
||||
[ 'M', center.x - 40, center.y ],
|
||||
[ 'L', center.x, center.y - 20 ],
|
||||
[ 'L', center.x + 40, center.y ],
|
||||
[ 'L', center.x, center.y + 20 ],
|
||||
[ 'Z' ]
|
||||
],
|
||||
fill: '#fff',
|
||||
stroke: '#666'
|
||||
}
|
||||
});
|
||||
shapeContainer.addShape('text', {
|
||||
attrs: {
|
||||
text: cfg.relation,
|
||||
x: center.x,
|
||||
y: center.y,
|
||||
textAlign: 'center',
|
||||
textBaseline: 'middle',
|
||||
fill: '#666'
|
||||
}
|
||||
});
|
||||
return keyShape;
|
||||
console.log(point, tangent);
|
||||
}
|
||||
});
|
||||
const graph = new G6.Graph({
|
||||
container: 'mountNode',
|
||||
width: 800,
|
||||
height: 500,
|
||||
modes: {
|
||||
default: [ 'drag-node']
|
||||
}
|
||||
});
|
||||
const data = {
|
||||
nodes: [{
|
||||
id: 'customer',
|
||||
label: 'customer',
|
||||
x: 200,
|
||||
y: 200,
|
||||
shape: 'rect',
|
||||
size: [60, 40]
|
||||
}, {
|
||||
id: 'customer_id',
|
||||
label: 'customer_id',
|
||||
x: 120,
|
||||
y: 160,
|
||||
shape: 'ellipse',
|
||||
size: [80,40]
|
||||
}, {
|
||||
id: 'name',
|
||||
label: 'name',
|
||||
x: 140,
|
||||
y: 100,
|
||||
shape: 'ellipse',
|
||||
size: [80,40]
|
||||
}, {
|
||||
id: 'address',
|
||||
label: 'address',
|
||||
x: 180,
|
||||
y: 60,
|
||||
shape: 'ellipse',
|
||||
size: [80, 40]
|
||||
}, {
|
||||
id: 'email',
|
||||
label: 'email',
|
||||
x: 240,
|
||||
y: 110,
|
||||
shape: 'ellipse',
|
||||
size: [80, 40]
|
||||
}, {
|
||||
id: 'order',
|
||||
label: 'order',
|
||||
x: 400,
|
||||
y: 200,
|
||||
shape: 'rect',
|
||||
size: [60, 40]
|
||||
}, {
|
||||
id: 'order_id',
|
||||
label: 'order_id',
|
||||
x: 320,
|
||||
y: 130,
|
||||
shape: 'ellipse',
|
||||
size: [80, 40]
|
||||
}, {
|
||||
id: 'order_status',
|
||||
label: 'order_status',
|
||||
x: 380,
|
||||
y: 80,
|
||||
shape: 'ellipse',
|
||||
size: [80, 40]
|
||||
}, {
|
||||
id: 'total_price',
|
||||
label: 'total_price',
|
||||
x: 440,
|
||||
y: 150,
|
||||
shape: 'ellipse',
|
||||
size: [80, 40]
|
||||
}, {
|
||||
id: 'employee',
|
||||
label: 'employee',
|
||||
x: 380,
|
||||
y: 380,
|
||||
shape: 'rect',
|
||||
size: [60, 40]
|
||||
}, {
|
||||
id: 'employee_id',
|
||||
label: 'employee_id',
|
||||
x: 320,
|
||||
y: 440,
|
||||
shape: 'ellipse',
|
||||
size: [80, 40]
|
||||
}, {
|
||||
id: 'title',
|
||||
label: 'title',
|
||||
x: 440,
|
||||
y: 440,
|
||||
shape: 'ellipse',
|
||||
size: [80, 40]
|
||||
}],
|
||||
edges: [{
|
||||
id: 'c_id',
|
||||
source: 'customer',
|
||||
target: 'customer_id'
|
||||
}, {
|
||||
id: 'c_name',
|
||||
source: 'customer',
|
||||
target: 'name'
|
||||
}, {
|
||||
id: 'c_address',
|
||||
source: 'customer',
|
||||
target: 'address'
|
||||
}, {
|
||||
id: 'c_email',
|
||||
source: 'customer',
|
||||
target: 'email'
|
||||
}, {
|
||||
id: 'o_id',
|
||||
source: 'order',
|
||||
target: 'order_id'
|
||||
}, {
|
||||
id: 'o_price',
|
||||
source: 'order',
|
||||
target: 'total_price'
|
||||
}, {
|
||||
id: 'o_status',
|
||||
source: 'order',
|
||||
target: 'order_status'
|
||||
}, {
|
||||
id: 'c_o',
|
||||
source: 'customer',
|
||||
target: 'order',
|
||||
relation: 'places',
|
||||
sourceEntity: '1',
|
||||
targetEntity: 'N',
|
||||
shape: 'relation'
|
||||
}, {
|
||||
id: 'o_e',
|
||||
source: 'employee',
|
||||
target: 'order',
|
||||
relation: 'finalize',
|
||||
sourceEntity: '1',
|
||||
targetEntity: 'N',
|
||||
shape: 'relation'
|
||||
}, {
|
||||
id: 'e_id',
|
||||
source: 'employee',
|
||||
target: 'employee_id'
|
||||
}, {
|
||||
id: 'e_title',
|
||||
source: 'employee',
|
||||
target: 'title'
|
||||
}]
|
||||
};
|
||||
graph.data(data);
|
||||
graph.render();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
155
demos/file-system.html
Normal file
155
demos/file-system.html
Normal file
@ -0,0 +1,155 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Title</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="mountNode"></div>
|
||||
<script src="assets/hierarchy.js"></script>
|
||||
<script src="../build/g6.js"></script>
|
||||
<script>
|
||||
G6.registerNode('file-node', {
|
||||
draw(cfg, group) {
|
||||
const keyShape = group.addShape('rect', {
|
||||
attrs: {
|
||||
x: cfg.x - 4,
|
||||
y: cfg.y - 12,
|
||||
fill: '#fff',
|
||||
stroke: null
|
||||
}
|
||||
});
|
||||
let marker;
|
||||
if (cfg.data.collapsed) {
|
||||
marker = group.addShape('marker', {
|
||||
attrs: {
|
||||
symbol: 'triangle',
|
||||
x: cfg.x + 4,
|
||||
y: cfg.y - 2,
|
||||
r: 4,
|
||||
fill: '#666'
|
||||
},
|
||||
});
|
||||
} else if (cfg.data.children && cfg.data.children.length > 0) {
|
||||
marker = group.addShape('marker', {
|
||||
attrs: {
|
||||
symbol: 'triangle-down',
|
||||
x: cfg.x + 4,
|
||||
y: cfg.y - 2,
|
||||
r: 4,
|
||||
fill: '#666'
|
||||
}
|
||||
});
|
||||
}
|
||||
const shape = group.addShape('text', {
|
||||
attrs: {
|
||||
x: cfg.x + 15,
|
||||
y: cfg.y + 4,
|
||||
text: cfg.data.name,
|
||||
fill: '#666',
|
||||
fontSize: 16,
|
||||
textAlign: 'left'
|
||||
}
|
||||
});
|
||||
const bbox = shape.getBBox();
|
||||
keyShape.attr({ width: bbox.width + 20, height: bbox.height + 4 });
|
||||
return keyShape;
|
||||
}
|
||||
});
|
||||
G6.registerEdge('step-line', {
|
||||
getControlPoints(cfg) {
|
||||
const startPoint = cfg.startPoint;
|
||||
const endPoint = cfg.endPoint;
|
||||
return [{ x: startPoint.x, y: endPoint.y }]
|
||||
}
|
||||
}, 'polyline');
|
||||
const graph = new G6.TreeGraph({
|
||||
container: 'mountNode',
|
||||
width: 500,
|
||||
height: 500,
|
||||
pixelRatio: 2,
|
||||
linkCenter: true,
|
||||
modes: {
|
||||
default: [{
|
||||
type: 'collapse-expand',
|
||||
animate: false,
|
||||
onChange(item, collapsed) {
|
||||
const data = item.get('model').data;
|
||||
data.collapsed = collapsed;
|
||||
return true;
|
||||
}
|
||||
}]
|
||||
},
|
||||
edgeStyle: {
|
||||
default: {
|
||||
stroke: '#A3B1BF'
|
||||
}
|
||||
},
|
||||
layout: data => {
|
||||
return Hierarchy.indented(data, {
|
||||
isHorizontal: true,
|
||||
direction: 'LR',
|
||||
indent: 80,
|
||||
getHeight() { return 16 },
|
||||
getWidth() { return 16 },
|
||||
});
|
||||
}
|
||||
});
|
||||
const data = {
|
||||
"id": "1",
|
||||
"name": "src",
|
||||
"children": [
|
||||
{
|
||||
"id": "1-1",
|
||||
"name": "behavior",
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"id": "1-3",
|
||||
"name": "graph",
|
||||
"children": [
|
||||
{
|
||||
"id": "1-3-1",
|
||||
"name": "controller",
|
||||
"children": []
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "1-5",
|
||||
"name": "item",
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"id": "1-6",
|
||||
"name": "shape",
|
||||
"children": [
|
||||
{
|
||||
"id": "1-6-2",
|
||||
"name": "extend",
|
||||
"children": []
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "1-7",
|
||||
"name": "util",
|
||||
"children": []
|
||||
}
|
||||
]
|
||||
};
|
||||
graph.data(data);
|
||||
graph.render();
|
||||
graph.getNodes().forEach(node => {
|
||||
const model = node.get('model');
|
||||
model.shape = 'file-node';
|
||||
model.label = model.data.name;
|
||||
});
|
||||
graph.getEdges().forEach(edge => {
|
||||
edge.get('model').shape = 'step-line';
|
||||
});
|
||||
graph.refresh();
|
||||
graph.fitView();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
84
demos/radial-tree.html
Normal file
84
demos/radial-tree.html
Normal file
@ -0,0 +1,84 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Title</title>
|
||||
</head>
|
||||
<body>
|
||||
<select id="layout">
|
||||
<option value="dendrogram">系统树</option>
|
||||
<option value="compactBox">紧凑树</option>
|
||||
</select>
|
||||
<div id="mountNode"></div>
|
||||
<script src="assets/hierarchy.js"></script>
|
||||
<script src="../build/g6.js"></script>
|
||||
<script src="./assets/jquery-3.2.1.min.js"></script>
|
||||
<script>
|
||||
let currentLayout = 'dendrogram';
|
||||
const layouts = {
|
||||
dendrogram: function(data) {
|
||||
const result = Hierarchy.dendrogram(data, {
|
||||
direction: 'LR', // H / V / LR / RL / TB / BT
|
||||
nodeSep: 50,
|
||||
rankSep: 100
|
||||
});
|
||||
G6.Util.radialLayout(result);
|
||||
return result;
|
||||
},
|
||||
compactBox: function(data) {
|
||||
const result = Hierarchy.compactBox(data, {
|
||||
direction: 'LR',
|
||||
getId(d) { return d.id; },
|
||||
getHeight() { return 16 },
|
||||
getWidth() { return 16 },
|
||||
getVGap() { return 50 },
|
||||
getHGap() { return 50 }
|
||||
});
|
||||
G6.Util.radialLayout(result);
|
||||
return result;
|
||||
}
|
||||
};
|
||||
const graph = new G6.TreeGraph({
|
||||
container: 'mountNode',
|
||||
width: 500,
|
||||
height: 500,
|
||||
pixelRatio: 2,
|
||||
modes: {
|
||||
default: [{
|
||||
type: 'collapse-expand',
|
||||
onChange(item, collapsed) {
|
||||
const data = item.get('model').data;
|
||||
data.collapsed = collapsed;
|
||||
return true;
|
||||
}
|
||||
}, 'drag-canvas']
|
||||
},
|
||||
nodeStyle: {
|
||||
default: {
|
||||
fill: '#40a9ff',
|
||||
stroke: '#096dd9'
|
||||
}
|
||||
},
|
||||
edgeStyle: {
|
||||
default: {
|
||||
stroke: '#A3B1BF'
|
||||
}
|
||||
},
|
||||
layout: layouts[currentLayout]
|
||||
});
|
||||
G6.Global.defaultNode.size = 16;
|
||||
$.getJSON('./assets/data/modeling-methods.json', function(data) {
|
||||
graph.data(data);
|
||||
graph.render();
|
||||
graph.fitView();
|
||||
});
|
||||
document.getElementById('layout').addEventListener('change', (e) => {
|
||||
const layout = e.target.value;
|
||||
if (currentLayout !== layout) {
|
||||
currentLayout = layout;
|
||||
graph.changeLayout(layouts[currentLayout]);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
99
demos/sankey-diagram.html
Normal file
99
demos/sankey-diagram.html
Normal file
@ -0,0 +1,99 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Title</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="mountNode"></div>
|
||||
<script src="../build/g6.js"></script>
|
||||
<script src="./assets/d3-4.13.0.min.js"></script>
|
||||
<script src="./assets/sankey.js"></script>
|
||||
<script src="./assets/jquery-3.2.1.min.js"></script>
|
||||
<script>
|
||||
const width = 960;
|
||||
const height = 500;
|
||||
const colors = ['#FD8C3D', '#D83F43', '#F7BED6', '#E487C7', '#46A848', '#D83F43', '#3B85BA', '#48335B', '#B7CDE9'];
|
||||
|
||||
G6.registerEdge('sankey', {
|
||||
draw(cfg, group) {
|
||||
const data = cfg.data;
|
||||
const shape = group.addShape('path', {
|
||||
attrs: {
|
||||
stroke: 'rgba(0,0,0,0.1)',
|
||||
lineWidth: Math.max(1, data.dy),
|
||||
path: path(data)
|
||||
}
|
||||
});
|
||||
return shape;
|
||||
}
|
||||
}, 'line');
|
||||
const graph = new G6.Graph({
|
||||
container: 'mountNode',
|
||||
width,
|
||||
height,
|
||||
nodeStyle: {
|
||||
default: {
|
||||
stroke: null
|
||||
}
|
||||
},
|
||||
edgeStyle: {
|
||||
active: {
|
||||
stroke: 'rgba(0,0,0,0.3)'
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
var sankey = d3.sankey()
|
||||
.nodeWidth(15)
|
||||
.nodePadding(10)
|
||||
.size([width, height]);
|
||||
|
||||
var path = sankey.link();
|
||||
|
||||
d3.json("./assets/energy.json", function(energy) {
|
||||
sankey
|
||||
.nodes(energy.nodes)
|
||||
.links(energy.links)
|
||||
.layout(32);
|
||||
const nodes = [];
|
||||
const edges = [];
|
||||
energy.nodes.forEach(node => {
|
||||
nodes.push({
|
||||
id: node.name,
|
||||
label: node.name,
|
||||
style: { fill: colors[Math.round( Math.random() * 9)] },
|
||||
x: node.x + 7.5,
|
||||
y: node.y + node.dy / 2 ,
|
||||
size: [ 15, node.dy ],
|
||||
shape: 'rect',
|
||||
labelCfg: {
|
||||
position: node.x > width / 2 ? 'left': 'right',
|
||||
offset: 5,
|
||||
}
|
||||
});
|
||||
});
|
||||
energy.links.forEach(edge => {
|
||||
const source = edge.source;
|
||||
const target = edge.target;
|
||||
edges.push({
|
||||
id: source.name + ':' + target.name,
|
||||
source: source.name,
|
||||
target: target.name,
|
||||
shape: 'sankey',
|
||||
data: edge
|
||||
});
|
||||
});
|
||||
graph.data({ nodes, edges });
|
||||
graph.render();
|
||||
graph.fitView();
|
||||
graph.on('edge:mouseenter', e => {
|
||||
graph.setItemState(e.item, 'active', true);
|
||||
});
|
||||
graph.on('edge:mouseleave', e => {
|
||||
graph.setItemState(e.item, 'active', false);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -8,16 +8,15 @@
|
||||
</style>
|
||||
<body>
|
||||
<select id="layout">
|
||||
<option value="dendrogram">基础树</option>
|
||||
<option value="dendrogram">系统树</option>
|
||||
<option value="compactBox">紧凑树</option>
|
||||
<option value="mindmap">脑图布局</option>
|
||||
</select>
|
||||
<input type="checkbox" id="radial" /><label for="radial">环形布局</label>
|
||||
<div id="mountNode"></div>
|
||||
<script src="assets/hierarchy.js"></script>
|
||||
<script src="../build/g6.js"></script>
|
||||
<script>
|
||||
let currentLayout = 'dendrogram';
|
||||
let radial = false;
|
||||
const layouts = {
|
||||
dendrogram: function(data) {
|
||||
return Hierarchy.dendrogram(data, {
|
||||
@ -34,6 +33,15 @@
|
||||
getVGap() { return 50 },
|
||||
getHGap() { return 50 }
|
||||
});
|
||||
},
|
||||
mindmap: function(data) {
|
||||
return Hierarchy.mindmap(data, {
|
||||
direction: 'H',
|
||||
getHeight() { return 16; },
|
||||
getWidth() { return 16; },
|
||||
getVGap() { return 50; },
|
||||
getHGap() { return 50; }
|
||||
});
|
||||
}
|
||||
};
|
||||
const graph = new G6.TreeGraph({
|
||||
@ -99,21 +107,10 @@
|
||||
children: [
|
||||
{
|
||||
id: 'SubTreeNode2.1'
|
||||
},
|
||||
{
|
||||
id: 'SubTreeNode2.2'
|
||||
}
|
||||
]
|
||||
}, {
|
||||
id: 'SubTreeNode3'
|
||||
}, {
|
||||
id: 'SubTreeNode4'
|
||||
}, {
|
||||
id: 'SubTreeNode5'
|
||||
}, {
|
||||
id: 'SubTreeNode6'
|
||||
}, {
|
||||
id: 'SubTreeNode7',
|
||||
id: 'SubTreeNode3',
|
||||
children: [
|
||||
{
|
||||
id: 'SubTreeNode3.1'
|
||||
@ -125,6 +122,14 @@
|
||||
id: 'SubTreeNode3.3'
|
||||
}
|
||||
]
|
||||
}, {
|
||||
id: 'SubTreeNode4'
|
||||
}, {
|
||||
id: 'SubTreeNode5'
|
||||
}, {
|
||||
id: 'SubTreeNode6'
|
||||
}, {
|
||||
id: 'SubTreeNode7',
|
||||
}, {
|
||||
id: 'SubTreeNode8'
|
||||
}, {
|
||||
@ -147,39 +152,11 @@
|
||||
});
|
||||
graph.refresh();
|
||||
graph.fitView();
|
||||
graph.getNodes().forEach((node) => {
|
||||
node.get('model').anchorPoints = [ [0, 0.5], [1, 0.5] ];
|
||||
});
|
||||
graph.getEdges().forEach((edge) => {
|
||||
edge.get('model').shape = 'cubic-horizontal';
|
||||
});
|
||||
graph.refresh();
|
||||
document.getElementById('radial').addEventListener('change', e => {
|
||||
radial = e.target.checked;
|
||||
if (radial) {
|
||||
graph.changeLayout((data) => {
|
||||
data = layouts[currentLayout](data);
|
||||
G6.Util.radialLayout(data);
|
||||
return data;
|
||||
});
|
||||
} else {
|
||||
radial = false;
|
||||
graph.changeLayout(layouts[currentLayout]);
|
||||
}
|
||||
});
|
||||
document.getElementById('layout').addEventListener('change', (e) => {
|
||||
const layout = e.target.value;
|
||||
if (currentLayout !== layout) {
|
||||
currentLayout = layout;
|
||||
if (radial) {
|
||||
graph.changeLayout((data) => {
|
||||
data = layouts[currentLayout](data);
|
||||
G6.Util.radialLayout(data);
|
||||
return data;
|
||||
});
|
||||
} else {
|
||||
graph.changeLayout(layouts[currentLayout]);
|
||||
}
|
||||
graph.changeLayout(layouts[currentLayout]);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -24,7 +24,7 @@ module.exports = {
|
||||
},
|
||||
onNodeClick(e) {
|
||||
const item = e.item;
|
||||
const children = item.get('model').children;
|
||||
const children = item.get('model').data.children;
|
||||
// 叶子节点的收缩和展开没有意义
|
||||
if (!children || children.length === 0) {
|
||||
return;
|
||||
@ -62,8 +62,25 @@ module.exports = {
|
||||
this.animateChild(data);
|
||||
this.performAnimate();
|
||||
} else {
|
||||
// 仅有重布局
|
||||
this.graph.changeData(data);
|
||||
const autoPaint = graph.get('autoPaint');
|
||||
graph.setAutoPaint(false);
|
||||
Util.traverseTree(data, child => {
|
||||
const node = graph.findById(child.id);
|
||||
node.get('model').x = child.x;
|
||||
node.get('model').y = child.y;
|
||||
});
|
||||
graph.refresh();
|
||||
Util.traverseTree(item.get('model').data, child => {
|
||||
const node = graph.findById(child.id);
|
||||
if (node === item) { return; }
|
||||
if (isCollapsed) {
|
||||
graph.hideItem(node);
|
||||
} else {
|
||||
graph.showItem(node);
|
||||
}
|
||||
});
|
||||
graph.paint();
|
||||
graph.setAutoPaint(autoPaint);
|
||||
}
|
||||
} else {
|
||||
if (this.animate) {
|
||||
|
||||
@ -130,27 +130,20 @@ class Edge extends Item {
|
||||
return this.get(pointName);
|
||||
}
|
||||
|
||||
_getLoopCfgs(cfg) {
|
||||
const item = this.get('source');
|
||||
return Util.getLoopCfgs(item, cfg);
|
||||
}
|
||||
|
||||
getShapeCfg(model) {
|
||||
const self = this;
|
||||
const linkCenter = this.get('linkCenter'); // 如果连接到中心，忽视锚点、忽视控制点
|
||||
let cfg = super.getShapeCfg(model);
|
||||
if (self.get('source') === self.get('target')) {
|
||||
cfg = this._getLoopCfgs(cfg);
|
||||
return cfg;
|
||||
}
|
||||
const linkCenter = self.get('linkCenter'); // 如果连接到中心，忽视锚点、忽视控制点
|
||||
const cfg = super.getShapeCfg(model);
|
||||
if (linkCenter) {
|
||||
cfg.startPoint = this._getEndCenter('source');
|
||||
cfg.endPoint = this._getEndCenter('target');
|
||||
cfg.startPoint = self._getEndCenter('source');
|
||||
cfg.endPoint = self._getEndCenter('target');
|
||||
} else {
|
||||
const controlPoints = cfg.controlPoints || this._getControlPointsByCenter(cfg);
|
||||
cfg.startPoint = this._getLinkPoint('source', model, controlPoints);
|
||||
cfg.endPoint = this._getLinkPoint('target', model, controlPoints);
|
||||
const controlPoints = cfg.controlPoints || self._getControlPointsByCenter(cfg);
|
||||
cfg.startPoint = self._getLinkPoint('source', model, controlPoints);
|
||||
cfg.endPoint = self._getLinkPoint('target', model, controlPoints);
|
||||
}
|
||||
cfg.sourceNode = self.get('sourceNode');
|
||||
cfg.targetNode = self.get('targetNode');
|
||||
return cfg;
|
||||
}
|
||||
|
||||
|
||||
@ -180,6 +180,8 @@ class Item {
|
||||
self.set('keyShape', keyShape);
|
||||
self.set('originStyle', this.getKeyShapeStyle());
|
||||
}
|
||||
// 防止由于用户外部修改 model 中的 shape 导致 shape 不更新
|
||||
this.set('currentShape', shapeType);
|
||||
this._resetStates(shapeFactory, shapeType);
|
||||
}
|
||||
|
||||
@ -371,6 +373,7 @@ class Item {
|
||||
const shape = model.shape;
|
||||
const newModel = Util.mix({}, model, cfg);
|
||||
const onlyMove = this._isOnlyMove(cfg);
|
||||
|
||||
// 仅仅移动位置时，既不更新，也不重绘
|
||||
if (onlyMove) {
|
||||
this.updatePosition(newModel);
|
||||
@ -379,7 +382,7 @@ class Item {
|
||||
// 1. 注册的元素（node, edge）允许更新
|
||||
// 2. 更新的信息中没有指定 shape
|
||||
// 3. 更新信息中指定了 shape 同时等于原先的 shape
|
||||
if (shapeFactory.shouldUpdate(shape) && newModel.shape === shape) {
|
||||
if (shapeFactory.shouldUpdate(shape) && newModel.shape === this.get('currentShape')) {
|
||||
const updateCfg = this.getShapeCfg(newModel);
|
||||
// 如果 x,y 发生改变，则重置位置
|
||||
// 非 onlyMove ，不代表不 move
|
||||
|
||||
@ -61,6 +61,7 @@ const singleEdgeDefinition = Util.mix({}, SingleShapeMixin, {
|
||||
getShapeStyle(cfg) {
|
||||
const color = cfg.color || Global.defaultEdge.color;
|
||||
const size = cfg.size || Global.defaultEdge.size;
|
||||
cfg = this.getPathPoints(cfg);
|
||||
const startPoint = cfg.startPoint;
|
||||
const endPoint = cfg.endPoint;
|
||||
const controlPoints = this.getControlPoints(cfg);
|
||||
@ -181,6 +182,14 @@ const singleEdgeDefinition = Util.mix({}, SingleShapeMixin, {
|
||||
getControlPoints(cfg) {
|
||||
return cfg.controlPoints;
|
||||
},
|
||||
/**
|
||||
* @internal 处理需要重计算点和边的情况
|
||||
* @param {Object} cfg 边的配置项
|
||||
* @return {Object} 边的配置项
|
||||
*/
|
||||
getPathPoints(cfg) {
|
||||
return cfg;
|
||||
},
|
||||
/**
|
||||
* 绘制边
|
||||
* @override
|
||||
@ -296,3 +305,9 @@ Shape.registerEdge('cubic-horizontal', {
|
||||
return controlPoints;
|
||||
}
|
||||
}, 'cubic');
|
||||
|
||||
Shape.registerEdge('loop', {
|
||||
getPathPoints(cfg) {
|
||||
return Util.getLoopCfgs(cfg);
|
||||
}
|
||||
}, 'cubic');
|
||||
|
||||
@ -45,7 +45,8 @@ const GraphicUtil = {
|
||||
};
|
||||
},
|
||||
// 获取某元素的自环边配置
|
||||
getLoopCfgs(item, cfg) {
|
||||
getLoopCfgs(cfg) {
|
||||
const item = cfg.sourceNode || cfg.targetNode;
|
||||
const containerMatrix = item.get('group')
|
||||
.getMatrix();
|
||||
const bbox = item.getKeyShape()
|
||||
@ -61,50 +62,53 @@ const GraphicUtil = {
|
||||
const center = [ containerMatrix[ 6 ], containerMatrix[ 7 ] ];
|
||||
const sinDelta = r * SELF_LINK_SIN;
|
||||
const cosDelta = r * SELF_LINK_COS;
|
||||
let startPoint,
|
||||
endPoint;
|
||||
switch (position) {
|
||||
case 'top':
|
||||
startPoint = [ center[0] - sinDelta, center[1] - cosDelta ];
|
||||
endPoint = [ center[0] + sinDelta, center[1] - cosDelta ];
|
||||
break;
|
||||
case 'top-right':
|
||||
startPoint = [ center[0] + sinDelta, center[1] - cosDelta ];
|
||||
endPoint = [ center[0] + cosDelta, center[1] - sinDelta ];
|
||||
break;
|
||||
case 'right':
|
||||
startPoint = [ center[0] + cosDelta, center[1] - sinDelta ];
|
||||
endPoint = [ center[0] + cosDelta, center[1] + sinDelta ];
|
||||
break;
|
||||
case 'bottom-right':
|
||||
startPoint = [ center[0] + cosDelta, center[1] + sinDelta ];
|
||||
endPoint = [ center[0] + sinDelta, center[1] + cosDelta ];
|
||||
break;
|
||||
case 'bottom':
|
||||
startPoint = [ center[0] + sinDelta, center[1] + cosDelta ];
|
||||
endPoint = [ center[0] - sinDelta, center[1] + cosDelta ];
|
||||
break;
|
||||
case 'bottom-left':
|
||||
startPoint = [ center[0] - sinDelta, center[1] + cosDelta ];
|
||||
endPoint = [ center[0] - cosDelta, center[1] + sinDelta ];
|
||||
break;
|
||||
case 'left':
|
||||
startPoint = [ center[0] - cosDelta, center[1] + sinDelta ];
|
||||
endPoint = [ center[0] - cosDelta, center[1] - sinDelta ];
|
||||
break;
|
||||
case 'top-left':
|
||||
startPoint = [ center[0] - cosDelta, center[1] - sinDelta ];
|
||||
endPoint = [ center[0] - sinDelta, center[1] - cosDelta ];
|
||||
break;
|
||||
default:
|
||||
startPoint = [ center[0] - sinDelta, center[1] - cosDelta ];
|
||||
endPoint = [ center[0] + sinDelta, center[1] - cosDelta ];
|
||||
}
|
||||
// 如果逆时针画，交换起点和终点
|
||||
if (loopCfg.clockwise === false) {
|
||||
const swap = [ startPoint[0], startPoint[1] ];
|
||||
startPoint = [ endPoint[0], endPoint[1] ];
|
||||
endPoint = [ swap[0], swap[1] ];
|
||||
let startPoint = [ cfg.startPoint.x, cfg.startPoint.y ];
|
||||
let endPoint = [ cfg.endPoint.x, cfg.endPoint.y ];
|
||||
// 如果定义了锚点的，直接用锚点坐标，否则，根据自环的 cfg 计算
|
||||
if (startPoint[0] === endPoint[0] && startPoint[1] === endPoint[1]) {
|
||||
switch (position) {
|
||||
case 'top':
|
||||
startPoint = [ center[0] - sinDelta, center[1] - cosDelta ];
|
||||
endPoint = [ center[0] + sinDelta, center[1] - cosDelta ];
|
||||
break;
|
||||
case 'top-right':
|
||||
startPoint = [ center[0] + sinDelta, center[1] - cosDelta ];
|
||||
endPoint = [ center[0] + cosDelta, center[1] - sinDelta ];
|
||||
break;
|
||||
case 'right':
|
||||
startPoint = [ center[0] + cosDelta, center[1] - sinDelta ];
|
||||
endPoint = [ center[0] + cosDelta, center[1] + sinDelta ];
|
||||
break;
|
||||
case 'bottom-right':
|
||||
startPoint = [ center[0] + cosDelta, center[1] + sinDelta ];
|
||||
endPoint = [ center[0] + sinDelta, center[1] + cosDelta ];
|
||||
break;
|
||||
case 'bottom':
|
||||
startPoint = [ center[0] + sinDelta, center[1] + cosDelta ];
|
||||
endPoint = [ center[0] - sinDelta, center[1] + cosDelta ];
|
||||
break;
|
||||
case 'bottom-left':
|
||||
startPoint = [ center[0] - sinDelta, center[1] + cosDelta ];
|
||||
endPoint = [ center[0] - cosDelta, center[1] + sinDelta ];
|
||||
break;
|
||||
case 'left':
|
||||
startPoint = [ center[0] - cosDelta, center[1] + sinDelta ];
|
||||
endPoint = [ center[0] - cosDelta, center[1] - sinDelta ];
|
||||
break;
|
||||
case 'top-left':
|
||||
startPoint = [ center[0] - cosDelta, center[1] - sinDelta ];
|
||||
endPoint = [ center[0] - sinDelta, center[1] - cosDelta ];
|
||||
break;
|
||||
default:
|
||||
startPoint = [ center[0] - sinDelta, center[1] - cosDelta ];
|
||||
endPoint = [ center[0] + sinDelta, center[1] - cosDelta ];
|
||||
}
|
||||
// 如果逆时针画，交换起点和终点
|
||||
if (loopCfg.clockwise === false) {
|
||||
const swap = [ startPoint[0], startPoint[1] ];
|
||||
startPoint = [ endPoint[0], endPoint[1] ];
|
||||
endPoint = [ swap[0], swap[1] ];
|
||||
}
|
||||
}
|
||||
const startVec = [ startPoint[0] - center[0], startPoint[1] - center[1] ];
|
||||
const startExtendVec = BaseUtil.vec2.scale([], startVec, scaleRate);
|
||||
|
||||
@ -278,56 +278,57 @@ describe('all node link center', () => {
|
||||
expect(edge.get('keyShape').attr('path')).eqls([[ 'M', 10, 10 ], [ 'L', 100, 100 ]]);
|
||||
});
|
||||
it('loop', () => {
|
||||
const node = graph.addItem('node', { id: 'circleNode', x: 150, y: 150, style: { fill: 'yellow' } });
|
||||
const edge1 = graph.addItem('edge', { id: 'edge', source: node, target: node,
|
||||
graph.set('linkCenter', false);
|
||||
const node = graph.addItem('node', { id: 'circleNode', x: 150, y: 150, style: { fill: 'yellow' }, anchorPoints: [[ 0, 0 ], [ 0, 1 ]] });
|
||||
const edge1 = graph.addItem('edge', { id: 'edge', source: node, target: node, shape: 'loop',
|
||||
loopCfg: {
|
||||
position: 'top',
|
||||
dist: 60,
|
||||
clockwise: true
|
||||
}, style: { endArrow: true }
|
||||
});
|
||||
const edge2 = graph.addItem('edge', { id: 'edge1', source: node, target: node,
|
||||
const edge2 = graph.addItem('edge', { id: 'edge1', source: node, target: node, shape: 'loop',
|
||||
loopCfg: {
|
||||
position: 'top-left',
|
||||
dist: 60,
|
||||
clockwise: false
|
||||
}, style: { endArrow: true }
|
||||
});
|
||||
const edge3 = graph.addItem('edge', { id: 'edge2', source: node, target: node, shape: 'cubic',
|
||||
const edge3 = graph.addItem('edge', { id: 'edge2', source: node, target: node, shape: 'loop',
|
||||
loopCfg: {
|
||||
position: 'top-right',
|
||||
dist: 60
|
||||
}, style: { endArrow: true }
|
||||
});
|
||||
const edge4 = graph.addItem('edge', { id: 'edge4', source: node, target: node, shape: 'cubic',
|
||||
const edge4 = graph.addItem('edge', { id: 'edge4', source: node, target: node, shape: 'loop',
|
||||
loopCfg: {
|
||||
position: 'right',
|
||||
dist: 60,
|
||||
clockwise: true
|
||||
}, style: { endArrow: true }
|
||||
});
|
||||
graph.addItem('edge', { id: 'edge5', source: node, target: node, shape: 'cubic',
|
||||
const edgeWithAnchor = graph.addItem('edge', { id: 'edge5', source: node, target: node, shape: 'loop', sourceAnchor: 0, targetAnchor: 1,
|
||||
loopCfg: {
|
||||
position: 'bottom-right',
|
||||
dist: 60,
|
||||
clockwise: true
|
||||
}, style: { endArrow: true }
|
||||
});
|
||||
graph.addItem('edge', { id: 'edge6', source: node, target: node, shape: 'cubic',
|
||||
graph.addItem('edge', { id: 'edge6', source: node, target: node, shape: 'loop',
|
||||
loopCfg: {
|
||||
position: 'bottom',
|
||||
dist: 60,
|
||||
clockwise: true
|
||||
}, style: { endArrow: true }
|
||||
});
|
||||
graph.addItem('edge', { id: 'edge7', source: node, target: node, shape: 'cubic',
|
||||
graph.addItem('edge', { id: 'edge7', source: node, target: node, shape: 'loop',
|
||||
loopCfg: {
|
||||
position: 'bottom-left',
|
||||
dist: 60,
|
||||
clockwise: true
|
||||
}, style: { endArrow: true }
|
||||
});
|
||||
graph.addItem('edge', { id: 'edge8', source: node, target: node, shape: 'cubic',
|
||||
graph.addItem('edge', { id: 'edge8', source: node, target: node, shape: 'loop',
|
||||
loopCfg: {
|
||||
position: 'left',
|
||||
dist: 60,
|
||||
@ -341,6 +342,12 @@ describe('all node link center', () => {
|
||||
expect(edge3.getKeyShape().attr('path')[0][1]).to.equal(edgeShape[1][5]);
|
||||
expect(edge4.getKeyShape().attr('path')[0][1]).to.equal(edge3.getKeyShape().attr('path')[1][5]);
|
||||
expect(edge4.getKeyShape().attr('path')[0][2]).to.equal(edge3.getKeyShape().attr('path')[1][6]);
|
||||
const pathWithAnchor = edgeWithAnchor.getKeyShape().attr('path');
|
||||
expect(pathWithAnchor[0][1]).to.equal(129.5);
|
||||
expect(pathWithAnchor[0][2]).to.equal(129.5);
|
||||
expect(pathWithAnchor[1][0]).to.equal('C');
|
||||
expect(pathWithAnchor[1][5]).to.equal(129.5);
|
||||
expect(pathWithAnchor[1][6]).to.equal(170.5);
|
||||
});
|
||||
it('clear states', () => {
|
||||
graph.clear();
|
||||
|
||||
Loading…
Reference in New Issue
Block a user