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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.