CODEWITHSUNDEEP
javascriptd3.js
optimus_prime
optimus_prime

Reputation: 827

Bounding the d3.js force directed graph

I have a forced directed graph that is too big and hence I am trying to bound it.

Below is some of the massive JSON Data

var IDData = JSON.stringify([
  ["1000000000039214051", "1000000000336563307", "Customer", "Customer", "2016-06-21 01:32:42", "2016-06-21 02:39:45", 155.4492950439453, 5],
  ["1000000000039214051", "10000000682705", "Customer", "Agent", "2016-08-16 23:12:24", "2016-08-17 05:08:22", 171.84144592285156, 4],
  ["04144221227", "1000000000060220197", "Phone", "Customer", "2016-01-04 03:41:13", "2016-01-05 01:54:03", 264.75457763671875, 5],
  ["10000000490503", "1000000000060220197", "Agent", "Customer", "2016-10-21 03:39:50", "2016-10-21 06:59:41", 26.845823287963867, 5],
  ["1000000000218556629", "600169462257", "Customer", "Phone", "2016-10-05 21:51:01", "2016-10-06 02:41:32", 76.26348876953125, 5],
  ["10000000486511", "2000000000212907929", "Agent", "Customer", "2016-11-13 23:33:38", "2016-11-14 01:30:13", 114.56245422363281, 4],
  ["CHB445789", "1000000000313013892", "ID_Card", "Customer", "2016-01-04 01:50:38", "2016-01-04 08:12:44", 457.4786071777344, 5],
  ["10000000499929", "2000000000144964466", "Agent", "Customer", "2016-09-01 05:01:45", "2016-09-04 03:44:10", 121.28453826904297, 2],
  ["2000000000180876855", "2000000000249424289", "Customer", "Customer", "2016-05-23 05:03:58", "2016-05-23 08:35:11", 218.06622314453125, 2],
  ["1000000000039214051", "10000000682705", "Customer", "Agent", "2016-10-19 04:46:56", "2016-10-19 09:50:15", 121.29517364501953, 4],
  ["CHB1737642", "2000000000144964466", "ID_Card", "Customer", "2016-10-11 04:50:40", "2016-10-11 07:58:43", 122.11398315429688, 1],
  ["10000000499929", "2000000000144964466", "Agent", "Customer", "2016-09-05 07:18:05", "2016-09-06 07:38:54", 197.2952880859375, 2],
  ["CHB1737642", "2000000000144964466", "ID_Card", "Customer", "2016-09-05 07:18:05", "2016-09-06 07:38:54", 197.2952880859375, 1],
  ["10000000491948", "4000000000005319752", "Agent", "Customer", "2016-10-01 04:25:43", "2016-10-03 02:16:23", 319.45477294921875, 6],
  ["1000000000039214051", "2000000000297175542", "Customer", "Customer", "2016-06-23 04:56:12", "2016-06-24 04:38:43", 25.19025421142578, 5],
  ["2000000000180876855", "10000000682705", "Customer", "Agent", "2016-08-10 00:36:05", "2016-08-11 08:55:59", 207.31932067871094, 3],
  ["2000000000180876855", "G9250991", "Customer", "ID_Card", "2016-09-08 02:35:18", "2016-09-08 04:37:55", 152.80625915527344, 3],....])

I am trying to use this example here to bound my graph and have modified the function ticked() accordingly

    var width = 960,
    height = 500,
    radius = 6;
    function ticked() {
    node.attr("cx", function(d) { return d.x = Math.max(radius, Math.min(width - radius, d.x)); })
        .attr("cy", function(d) { return d.y = Math.max(radius, Math.min(height - radius, d.y)); });

    link.attr("x1", function(d) { return d.source.x; })
        .attr("y1", function(d) { return d.source.y; })
        .attr("x2", function(d) { return d.target.x; })
        .attr("y2", function(d) { return d.target.y; });
  }

The graph does get bounded but it does not appear the same as it does in the example and looks clumsy.

Is that because the graph is just too big? Is there a way to make this graph look more organized ?

UPDATE :

 var simulation = d3.forceSimulation()
.force("link", d3.forceLink().id(function(d) {
  return d.id;
})).distance(5).strength(1)
.force("charge", d3.forceManyBody())
.force("center", d3.forceCenter(width / 2, height / 2));

This failed with:

Uncaught TypeError: d3.forceSimulation(...).force(...).distance is not a function
at makeGraph ((index):934)
at window.onload ((index):1217)

Still finding my feet in d3.js. Here is the fiddle

Upvotes: 2

Views: 83

Answers (1)

Paul S
Paul S

Reputation: 36787

You can tighten up the nodes by modifying the link distance and strength. The default distance value is 30 and the default strength is based on the number of nodes the source or target of a link connect to (source).

d3.forceLink().id(function(d) {
  return d.id;
}).distance(5).strength(1)

Upvotes: 3

Related Questions