Javascript 使用sigma.js展开和折叠 目标
我试图在中实现扩展和崩溃。在任何节点上单击鼠标右键，它将添加新节点并连接其边，但它将放置在随机位置 我想在自由空间中添加节点，它们不应该与其他节点碰撞或重叠。它应该通过动画缓慢扩展，在自由空间区域扩展，如 代码Javascript 使用sigma.js展开和折叠 目标,javascript,graph,graph-visualization,sigma.js,Javascript,Graph,Graph Visualization,Sigma.js,我试图在中实现扩展和崩溃。在任何节点上单击鼠标右键，它将添加新节点并连接其边，但它将放置在随机位置 我想在自由空间中添加节点，它们不应该与其他节点碰撞或重叠。它应该通过动画缓慢扩展，在自由空间区域扩展，如 代码 航空公司图形渲染 正文，html{ 宽度：100%； 边际：0px； 填充：0px； 身高：100% } #图形容器{ 宽度：100%； 身高：100%； } 变量图={ “节点”：[ { “城市”：“达拉斯”， “区域”：999， “代码”：214， “国家”：“美国” }, { “
航空公司图形渲染
正文，html{
宽度：100%；
边际：0px；
填充：0px；
身高：100%
}
#图形容器{
宽度：100%；
身高：100%；
}
变量图={
“节点”：[
{
“城市”：“达拉斯”，
“区域”：999，
“代码”：214，
“国家”：“美国”
},
{
“城市”：“奥斯汀”，
“面积”：1180，
“代码”：512，
“国家”：“美国”
},
{
“城市”：“纽约”，
“区域”：1214，
“代码”：646，
“国家”：“美国”
},
{
“城市”：“华盛顿”，
“面积”：176，
“代码”：564，
“国家”：“美国”
},
{
“城市”：“亚特兰大”，
“区域”：342，
“代码”：518，
“国家”：“美国”
},
{
“城市”：“休斯顿”，
“区域”：1625，
“代码”：281，
“国家”：“美国”
},
{
“城市”：“芝加哥”，
“面积”：606，
“代码”：312，
“国家”：“美国”
},
{
“城市”：“伦敦”，
“面积”：909，
“代码”：312，
“国家”：“英格兰”
}
],
“边缘”：[
{
"关键":一,，
“来源”：“达拉斯”，
“目的地”：“奥斯汀”，
“距离”：200，
“航空公司”：“英国航空公司”，
票价：220
},
{
"关键":二,，
“资料来源”：“奥斯汀”，
“目的地”：“达拉斯”，
“距离”：200，
“航空公司”：“汉莎航空公司”，
票价：120
},
{
"关键":三,，
“来源”：“华盛顿”，
“目的地”：“达拉斯”，
“距离”：1300，
“航空公司”：“汉莎航空公司”，
票价：300
},
{
"关键":四,，
“资料来源”：“亚特兰大”，
“目的地”：“华盛顿”，
“距离”：600，
“航空公司”：“汉莎航空公司”，
“票价”：600
},
{
“关键”：5，
“来源”：“华盛顿”，
“目的地”：“亚特兰大”，
“距离”：600，
“航空公司”：“荷航”，
票价：400
},
{
“关键”：6，
“来源”：“纽约”，
“目的地”：“亚特兰大”，
“距离”：300，
“航空公司”：“卡塔尔”，
票价：1300
},
{
“关键”：7，
“来源”：“休斯顿”，
“目的地”：“亚特兰大”，
“距离”：800，
“航空公司”：“靛蓝”，
票价：400
},
{
“关键”：8，
“资料来源”：“亚特兰大”，
“目的地”：“休斯顿”，
“距离”：800，
“航空公司”：“Spicejet”，
“票价”：600
},
{
“关键”：9，
“来源”：“纽约”，
“目的地”：“芝加哥”，
“距离”：1000，
“航空公司”：“中国国际航空公司”，
“票价”：500
},
{
“关键”：10，
“来源”：“芝加哥”，
“目的地”：“纽约”，
“距离”：1000，
“航空公司”：“喷气航空公司”，
票价：200
},
{
“关键”：11，
“来源”：“达拉斯”，
“目的地”：“芝加哥”，
“距离”：900，
“航空公司”：“汉莎航空公司”，
票价：1300
},
{
“关键”：12，
“资料来源”：“奥斯汀”，
“目的地”：“休斯顿”，
“距离”：160，
“航空公司”：“汉莎航空公司”，
<!DOCTYPE html>
<html>
<head>
<title> Airlines Graph Render </title>
<script src="../build/sigma.min.js"></script>
<script src="../src/renderers/canvas/sigma.canvas.edges.curvedArrow.js"></script>
<script src="../plugins/sigma.layout.forceAtlas2/worker.js"></script>
<script src="../plugins/sigma.layout.forceAtlas2/supervisor.js"></script>
<script src="../plugins/sigma.renderers.edgeLabels/settings.js"></script>
<script src="../plugins/sigma.renderers.edgeLabels/sigma.canvas.edges.labels.curve.js"></script>
<script src="../plugins/sigma.renderers.edgeLabels/sigma.canvas.edges.labels.def.js"></script>
<script src="../plugins/sigma.renderers.edgeLabels/sigma.canvas.edges.labels.curvedArrow.js"></script>
<style>
body,html{
width: 100%;
margin: 0px;
padding: 0px;
height: 100%
}
#graph-container {
width:100%;
height: 100%;
}
</style>
</head>
<body>
<div id="graph-container"></div>
<script >
var graph = {
"nodes": [
{
"city": "Dallas",
"area": 999,
"code": 214,
"country": "USA"
},
{
"city": "Austin",
"area": 1180,
"code": 512,
"country": "USA"
},
{
"city": "New York",
"area": 1214,
"code": 646,
"country": "USA"
},
{
"city": "Washington",
"area": 176,
"code": 564,
"country": "USA"
},
{
"city": "Atlanta",
"area": 342,
"code": 518,
"country": "USA"
},
{
"city": "Huston",
"area": 1625,
"code": 281,
"country": "USA"
},
{
"city": "Chicago",
"area": 606,
"code": 312,
"country": "USA"
},
{
"city": "London",
"area": 909,
"code": 312,
"country": "England"
}
],
"edges": [
{
"key": 1,
"source": "Dallas",
"destination": "Austin",
"distance": 200,
"airlines": "British Airways",
"fare": 220
},
{
"key": 2,
"source": "Austin",
"destination": "Dallas",
"distance": 200,
"airlines": "Lufthansa",
"fare": 120
},
{
"key": 3,
"source": "Washington",
"destination": "Dallas",
"distance": 1300,
"airlines": "Lufthansa",
"fare": 300
},
{
"key": 4,
"source": "Atlanta",
"destination": "Washington",
"distance": 600,
"airlines": "Lufthansa",
"fare": 600
},
{
"key": 5,
"source": "Washington",
"destination": "Atlanta",
"distance": 600,
"airlines": "KLM",
"fare": 400
},
{
"key": 6,
"source": "New York",
"destination": "Atlanta",
"distance": 300,
"airlines": "Qatar",
"fare": 1300
},
{
"key": 7,
"source": "Huston",
"destination": "Atlanta",
"distance": 800,
"airlines": "Indigo",
"fare": 400
},
{
"key": 8,
"source": "Atlanta",
"destination": "Huston",
"distance": 800,
"airlines": "Spicejet",
"fare": 600
},
{
"key": 9,
"source": "New York",
"destination": "Chicago",
"distance": 1000,
"airlines": "Air China",
"fare": 500
},
{
"key": 10,
"source": "Chicago",
"destination": "New York",
"distance": 1000,
"airlines": "Jet Airways",
"fare": 200
},
{
"key": 11,
"source": "Dallas",
"destination": "Chicago",
"distance": 900,
"airlines": "Lufthansa",
"fare": 1300
},
{
"key": 12,
"source": "Austin",
"destination": "Huston",
"distance": 160,
"airlines": "Lufthansa",
"fare": 240
},
{
"key": 13,
"source": "Dallas",
"destination": "New York",
"distance": 780,
"airlines": "Lufthansa",
"fare": 300
}
]
};
var g = {
nodes:[],
edges:[]
}
// Generate a random graph:
colors = [
'#617db4',
'#668f3c',
'#c6583e',
'#b956af'
];
sigma.utils.pkg('sigma.canvas.nodes');
sigma.canvas.nodes.border = function(node, context, settings) {
var prefix = settings('prefix') || '';
context.beginPath();
context.arc(
node[prefix + 'x']+15,
node[prefix + 'y'],
node[prefix + 'size']-2,
0,
Math.PI * 2,
true
);
//context.fillStyle = "orange";
context.strokeStyle = node.color || settings('defaultNodeColor');
//get the data from the group
//var data = d3.select(this).data();
context.stroke();
//context.fill();
context.font = "10px Arial";
context.fillStyle = "black";
context.strokeStyle = "black";
//write the text in the context
context.fillText(10,node[prefix + 'x']+15+ 10, node[prefix + 'size']-2-15);
// Adding a border
//context.lineWidth = node.borderWidth || 1;
//context.strokeStyle = node.borderColor || '#fff';
//context.stroke();
context.fillStyle = node.color || settings('defaultNodeColor');
context.beginPath();
context.arc(
node[prefix + 'x'],
node[prefix + 'y'],
node[prefix + 'size'],
0,
Math.PI * 2,
true
);
context.closePath();
context.fill();
};
for (var i = 0; i < graph.nodes.length; i++)
g.nodes.push({
id: graph.nodes[i]['city'],
label: graph.nodes[i]['city'],
x: Math.random(),
y: Math.random(),
size: 8,
color: colors[Math.floor(Math.random() * colors.length)]
});
for (var i = 0; i < graph.edges.length; i++)
g.edges.push({
id: graph.edges[i]['key'],
source: graph.edges[i]['source'],
target: graph.edges[i]['destination'],
size: 8,
label:graph.edges[i]['airlines'],
color: '#668e3e',
type:'curvedArrow'
});
s = new sigma({
graph: g,
renderer: {
container: document.getElementById('graph-container'),
type: 'canvas'
},
settings: {
edgeLabelSize: 'proportional',
minNodeSize: 1,
maxNodeSize: 10,
minEdgeSize: 0.1,
maxEdgeSize: 2,
enableEdgeHovering: true,
edgeHoverSizeRatio: 2,
defaultNodeType: 'border',
defaultNodeColor:"#fff",
mouseEnabled: true,
touchEnabled: true
}
});
//s.settings('autoRescale', false)
s.startForceAtlas2({worker: true, barnesHutOptimize: false});
s.stopForceAtlas2();
s.bind('rightClickNode', function(e) {
console.log(e.type, e.data.node.label, e.data.captor);
var name = 'New City'+Math.random();
s.graph.addNode({
id: name,
label: 'baai',
x: Math.random(),
y: Math.random(),
size: 8,
color: colors[Math.floor(Math.random() * colors.length)]
});
s.graph.addEdge({
id: name +Math.random(),
source: e.data.node.id,
target: name,
size: 8,
label:'bit'+Math.random(),
color: '#668e3e',
type:'curvedArrow'
});
// Edge with Already existing one
s.graph.addEdge({
id: name+Math.random(),
source: 'Huston',
target: name,
size: 8,
label:'New City'+Math.random(),
color: '#668e3e',
type:'curvedArrow'
});
setTimeout(function(){
s.refresh();
},1000)
});
</script>
</body>
</html>
s.graph.addNode({
x: Math.random(),
y: Math.random(),
s.graph.addNode({
x: clickedNode.x + 2* Math.random() - 1,
y: clickedNode.y + 2* Math.random() - 1,
sigma.layouts.fruchtermanReingold.configure(sigmaInstance, {easing: 'quadraticOut'});
sigma.layouts.fruchtermanReingold.start(sigmaInstance);
sigmaInstance.refresh();
sigma.layouts.fruchtermanReingold.start(sigmaInstance);