i am developing a social network visualization component. I am using the Vivagraph library, but when I add nodes that are not connected to another node, the graph goes outside of the container. Here is my implementation. Please help, this is very important to me.
This is my javascript file.
var max_radius = 20;
var min_radius = 5;
var max_fitness=10;
var min_fitness=2;
var contenedor;
jQuery(document).ready(function(){
contenedor=document.getElementById('graph-container');
onLoad();}
);
function onLoad() {
var graph = constructGraph();
var graphics = Viva.Graph.View.svgGraphics();
var defs = Viva.Graph.svg('defs');
graphics.getSvgRoot().append(defs);
graphics.node(createNodeWithImage)
.placeNode(placeNodeWithTransform)
.link(createCustomLink)
.placeLink(function(linkUI, fromPos, toPos) {
// linkUI - is the object returend from link() callback above.
var data = 'M' + fromPos.x + ',' + fromPos.y +
'L' + toPos.x + ',' + toPos.y;
linkUI.attr("d", data);
});
var layout = Viva.Graph.Layout.forceDirected(graph, {
springLength : 10,
springCoeff : 0.0001,
dragCoeff : 0.02,
gravity : -30
});
var renderer = Viva.Graph.View.renderer(graph, {
layout: layout,
graphics: graphics,
container: contenedor
,prerender:100
});
renderer.run();
setTimeout(function(){
//renderer.reset();
renderer.pause();
}, 2000);
function createNodeWithImage(node) {
var radius=parseInt(max_radius*node.data.weight,10)+min_radius;
// First, we create a fill pattern and add it to SVG's defs:
var pattern = Viva.Graph.svg('pattern')
.attr('id', "imageFor_" + node.id)
.attr('patternUnits', "userSpaceOnUse")
.attr('width', 200)
.attr('height', 200)
var image = Viva.Graph.svg('image')
.attr('x', '0')
.attr('y', '0')
.attr('height', radius*2)
.attr('width', radius*2)
.link(node.data.url);
pattern.append(image);
defs.append(pattern);
// now create actual node and reference created fill pattern:
var stroke_width=parseInt(radius*0.09375,10)+1;
var ui = Viva.Graph.svg('g');
var circle = Viva.Graph.svg('circle')
.attr('cx', radius)
.attr('cy', radius)
.attr('fill', 'url(#imageFor_' + node.id + ')')
.attr('r', radius)
.attr('stroke',node.data.typeColor)
.attr('stroke-width',stroke_width);
ui.append(circle);
jQuery(ui).hover(function() { // mouse over
}, function() { // mouse out
});
return ui;
}
function placeNodeWithTransform(nodeUI, pos) {
// Shift image to let links go to the center:
var offset=parseInt(nodeUI.node.data.weight*max_radius+min_radius,10);
nodeUI.attr('transform', 'translate(' + (pos.x - offset) + ',' + (pos.y - offset) + ')');
}
}
function createCustomLink(link){
var ui =Viva.Graph.svg('path')
.attr('stroke', '#333')
.attr('stroke-width', link.data.weight*max_fitness+min_fitness);
jQuery(ui).hover(function() { // mouse over
}, function() { // mouse out
});
return ui;
}
function constructGraph() {
var graph = Viva.Graph.graph();
graph.addNode('anvaka', {
url: 'foto.jpg',
weight: 0.1,
typeColor:'green'
});
graph.addNode('manunt', {
url: 'foto.jpg',
weight: 0.1,
typeColor:'green'
});
graph.addNode('thlorenz', {
url: 'foto.jpg',
weight: 0.1,
typeColor:'yellow'
});
graph.addNode('bling', {
url: 'foto.jpg',
weight: 1.0,
typeColor:'yellow'
});
graph.addNode('diyan', {
url: 'foto.jpg',
weight: 0.4,
typeColor:'blue'
});
graph.addNode('pocheptsov', {
url: 'foto.jpg',
weight: 0.9,
typeColor:'green'
});
graph.addNode('dimapasko', {
url: 'foto.jpg',
weight: 0.2,
typeColor:'blue'
});
graph.addNode('me', {
url: 'foto.jpg',
weight: 0.2,
typeColor:'blue'
});
graph.addLink('anvaka', 'manunt',{ weight: 0.0001 });
graph.addLink('anvaka', 'thlorenz',{ weight: 1 });
graph.addLink('anvaka', 'bling',{ weight: 0.2 });
graph.addLink('anvaka', 'diyan',{ weight: 0.3 });
graph.addLink('diyan', 'pocheptsov',{ weight: 0.6 });
graph.addLink('diyan', 'dimapasko',{ weight: 0.6 });
graph.addLink('anvaka', 'pocheptsov',{ weight: 0.6 });
graph.addLink('anvaka', 'dimapasko',{ weight: 0.6 });
graph.addLink('manunt', 'pocheptsov',{ weight: 0.6 });
graph.addLink('manunt', 'dimapasko',{ weight: 0.6 });
graph.addLink('manunt', 'pocheptsov',{ weight: 0.6 });
graph.addLink('pocheptsov', 'dimapasko',{ weight: 0.6 });
graph.addLink('pocheptsov', 'bling',{ weight: 0.2 });
graph.addLink('pocheptsov', 'diyan',{ weight: 0.3 });
graph.addLink('pocheptsov', 'pocheptsov',{ weight: 0.6 });
graph.addLink('pocheptsov', 'dimapasko',{ weight: 0.6 });
graph.addLink('bling', 'pocheptsov',{ weight: 0.6 });
graph.addLink('bling', 'dimapasko',{ weight: 0.6 });
graph.addLink('manunt', 'bling',{ weight: 0.2 });
graph.addLink('bling', 'diyan',{ weight: 0.3 });
graph.addLink('bling', 'pocheptsov',{ weight: 0.9 });
graph.addLink('bling', 'dimapasko',{ weight: 0.6 });
return graph;
}<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>VivaGraphs SVG circle images</title>
<script src="../../../dist/vivagraph.js"></script>
<script src="../../../dist/jquery.min.js"></script>
<script src="index.js"></script>
<style type='text/css'>
svg,
#graph-container {
width:500px; height:400px;
border:1px solid green;
background-color: #CCC;
position: absolute;
overflow: hidden;
}
</style>
</head>
<body >
<span id="par">nodo</span>
<span id="arista">arista</span>
<div id="graph-container"></div>
</body>
</html>You can't. I'd recommend you to customise your the drag coefficient by increasing it, it'll find an equilibrium within the container. Otherwise, you could customise the spring coefficient by making it go nearer to zero (never under zero). I'd recommend you to do both. Good Luck!