javascript - Bounding the d3.js force directed graph -

i have forced directed graph big , hence trying bound it.

below of 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 trying use example here bound graph , have modified 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 bounded not appear same in example , looks clumsy.

is because graph big? there way make graph 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 not function @ makegraph ((index):934) @ window.onload ((index):1217) 

still finding feet in d3.js. here fiddle

you can tighten nodes modifying link distance , strength. default distance value 30 , default strength based on number of nodes source or target of link connect (source).

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