Back

Central Layout Gravity

When using force-directed ('dynamic') layout in NetChart, node placement and interactions use simulated physics. This example showcases the 'centralGravityFactor' property, which pulls nodes towards the center. Incrasing this value will create a more intense effect.

Documentation Open in JSFiddle
Start Free Trial Purchase

HTML

HTML 
<script src="https://cdn.zoomcharts-cloud.com/1/nightly/zoomcharts.js"></script>
<div id="demo"></div>
<div id="info" style="position: absolute; pointer-events: none"></div>

CSS

CSS 
//No CSS for this example

JavaScript

JavaScript 
var nc = null;

var nodes_spawned = 0;
var update_interval = null;
var nodes_per_cycle = 5;
var spawn_delay = 200;
var max = 1000;
var restart_timeout = 6000;
var t = null;
var dom_info = document.getElementById("info");
var players = 3;
var colors = [
  "red",
  "green",
  "blue",
  "orange"
];
function push() {
  var nodes = [];
  for (var c = 0; c < nodes_per_cycle; c++) {
    player = Math.round(Math.random() * players);
    const value = 15 + Math.random() * 10
    nodes.push({
      id: "a" + nodes_spawned,
      player: player,
      value,
      style: {
        fillColor: colors[player],
        radius: Math.round(value),
        label: ""
      }
    });
    nodes_spawned++;
  }
  nc.addData({ nodes: nodes });
  updateInfo();
  if(nodes_spawned >= max) {
    clearInterval(t);
      setTimeout(function() {
          start();
      }, restart_timeout);
  }
}

function updateInfo() {
  var s = "Total: " + nodes_spawned + ";";
  dom_info.innerHTML = s;
}

function start() {
    if(nc) {
        nc.remove();
    }

    nc = new NetChart({
        container: document.getElementById("demo"),
        navigation: {
            mode: "showall"
        },
        layout: {
            dynamic: {
                centralGravityFactor: 10.0
            }
        },
        interaction: {
            resizing: {
                enabled: false
            }
        }
    });

    nodes_spawned = 0;
    t = setInterval(push, spawn_delay);
    for (var i = 0; i < 2; i++) {
        push();
    }
}

start();

Data

Data 
//No separate data for this example