diff --git a/docs/graph.html b/docs/graph.html index fb9bebc3..461a2841 100644 --- a/docs/graph.html +++ b/docs/graph.html @@ -24,7 +24,7 @@
The graph visualization works smooth on any modern browser for up to a - few thousand nodes and edges. + few hundred nodes and edges.
@@ -290,6 +290,14 @@ var nodes = [ the same color schema. +
- Graph uses a force directed algorithm to layout nodes and edges, and uses the Barnes-Hut gravitational simulation model. There are a number of configuration options available to tune the physics model. Note that wrong configuration can lead to instable behaviour. + The original simulation method was based on particel physics with a repulsion field (potential) around each node, + and the edges were modelled as springs. The new system employed the Barnes-Hut gravitational simulation model. The edges are still modelled as springs. + To unify the physics system, the damping, repulsion distance and edge length have been combined in an physics option. To retain good behaviour, both the old repulsion model and the Barnes-Hut model have their own parameters. + If no options for the physics system are supplied, the Barnes-Hut method will be used with the default parameters.
// These variables must be defined in an options object named physics. diff --git a/examples/graph/17_network_info.html b/examples/graph/17_network_info.html index 0b7e033f..ca97d75a 100644 --- a/examples/graph/17_network_info.html +++ b/examples/graph/17_network_info.html @@ -96,11 +96,11 @@ var x = - mygraph.clientWidth / 2 + 50; var y = - mygraph.clientHeight / 2 + 50; var step = 70; - nodes.push({id: 1000, x: x, y: y, label: 'Internet', group: 'internet', value: 1}); - nodes.push({id: 1001, x: x, y: y + step, label: 'Switch', group: 'switch', value: 1}); - nodes.push({id: 1002, x: x, y: y + 2 * step, label: 'Server', group: 'server', value: 1}); - nodes.push({id: 1003, x: x, y: y + 3 * step, label: 'Computer', group: 'desktop', value: 1}); - nodes.push({id: 1004, x: x, y: y + 4 * step, label: 'Smartphone', group: 'mobile', value: 1}); + nodes.push({id: 1000, x: x, y: y, label: 'Internet', group: 'internet', value: 1, fixed:true}); + nodes.push({id: 1001, x: x, y: y + step, label: 'Switch', group: 'switch', value: 1, fixed:true}); + nodes.push({id: 1002, x: x, y: y + 2 * step, label: 'Server', group: 'server', value: 1, fixed:true}); + nodes.push({id: 1003, x: x, y: y + 3 * step, label: 'Computer', group: 'desktop', value: 1, fixed:true}); + nodes.push({id: 1004, x: x, y: y + 4 * step, label: 'Smartphone', group: 'mobile', value: 1, fixed:true}); // create a graph var container = document.getElementById('mygraph'); diff --git a/src/graph/Graph.js b/src/graph/Graph.js index daa8165b..a170f0fd 100644 --- a/src/graph/Graph.js +++ b/src/graph/Graph.js @@ -40,6 +40,7 @@ function Graph (container, data, options) { image: undefined, widthMin: 16, // px widthMax: 64, // px + fixed:false, fontColor: 'black', fontSize: 14, // px fontFace: 'verdana',