Sticky force directed graph with zoom, pan, labels and styling - D3 v4

.block

license: gpl-3.0
height: 600

README.md

This example shows a sticky force directed graph with zoom, pan, labels and styling. Once rendered the graph stays in position allowing dragging of nodes and panning/zooming around the graph.

example.json

{"nodes":[
{"name":"n4073","id":4073,"level":0},
{"name":"n4053","id":4053,"level":1},
{"name":"n4075","id":4075,"level":0},
{"name":"n4078","id":4078,"level":2},
{"name":"n4072","id":4072,"level":2},
{"name":"n4103","id":4103,"level":0},
{"name":"n5177","id":5177,"level":2},
{"name":"n441","id":441,"level":0},
{"name":"n4139","id":4139,"level":1},
{"name":"n4140","id":4140,"level":2},
{"name":"n7386","id":7386,"level":2},
{"name":"n5178","id":5178,"level":2},
{"name":"n4143","id":4143,"level":2},
{"name":"n6285","id":6285,"level":2},
{"name":"n5180","id":5180,"level":1},
{"name":"n6234","id":6234,"level":0},
{"name":"n5173","id":5173,"level":0},
{"name":"n5179","id":5179,"level":2},
{"name":"n5163","id":5163,"level":0},
{"name":"n7303","id":7303,"level":2},
{"name":"n542","id":542,"level":0},
{"name":"n5181","id":5181,"level":2},
{"name":"n5182","id":5182,"level":2},
{"name":"n5183","id":5183,"level":2},
{"name":"n5184","id":5184,"level":2},
{"name":"n5174","id":5174,"level":1},
{"name":"n5176","id":5176,"level":0},
{"name":"n7304","id":7304,"level":2},
{"name":"n5185","id":5185,"level":2},
{"name":"n5217","id":5217,"level":2},
{"name":"n7305","id":7305,"level":2},
{"name":"n7306","id":7306,"level":2},
{"name":"n7307","id":7307,"level":2},
{"name":"n7308","id":7308,"level":2},
{"name":"n7309","id":7309,"level":2},
{"name":"n7310","id":7310,"level":2},
{"name":"n7311","id":7311,"level":2},
{"name":"n4114","id":4114,"level":0},
{"name":"n5186","id":5186,"level":2},
{"name":"n7312","id":7312,"level":2},
{"name":"n7313","id":7313,"level":2},
{"name":"n7314","id":7314,"level":2},
{"name":"n5240","id":5240,"level":2},
{"name":"n7352","id":7352,"level":2},
{"name":"n7353","id":7353,"level":2},
{"name":"n5302","id":5302,"level":2},
{"name":"n5187","id":5187,"level":2},
{"name":"n4142","id":4142,"level":0},
{"name":"n7315","id":7315,"level":2},
{"name":"n7316","id":7316,"level":2},
{"name":"n5188","id":5188,"level":2},
{"name":"n7317","id":7317,"level":2},
{"name":"n7318","id":7318,"level":2},
{"name":"n7319","id":7319,"level":2},
{"name":"n4074","id":4074,"level":0},
{"name":"n5191","id":5191,"level":2},
{"name":"n7320","id":7320,"level":2},
{"name":"n7322","id":7322,"level":2},
{"name":"n5194","id":5194,"level":2},
{"name":"n7323","id":7323,"level":2},
{"name":"n5196","id":5196,"level":2},
{"name":"n7324","id":7324,"level":2},
{"name":"n5197","id":5197,"level":2},
{"name":"n5198","id":5198,"level":2},
{"name":"n5199","id":5199,"level":2},
{"name":"n7462","id":7462,"level":2},
{"name":"n5363","id":5363,"level":2},
{"name":"n5827","id":5827,"level":0},
{"name":"n3174","id":3174,"level":2},
{"name":"n6001","id":6001,"level":2},
{"name":"n4106","id":4106,"level":0},
{"name":"n7300","id":7300,"level":2},
{"name":"n3063","id":3063,"level":2},
{"name":"n582","id":582,"level":1},
{"name":"n434","id":434,"level":2},
{"name":"n7377","id":7377,"level":2},
{"name":"n5259","id":5259,"level":2},
{"name":"n5260","id":5260,"level":2},
{"name":"n573","id":573,"level":2},
{"name":"n634","id":634,"level":1},
{"name":"n5170","id":5170,"level":1},
{"name":"n791","id":791,"level":1},
{"name":"n5171","id":5171,"level":2},
{"name":"n7299","id":7299,"level":2},
{"name":"n765","id":765,"level":2},
{"name":"n7298","id":7298,"level":1},
{"name":"n1156","id":1156,"level":2},
{"name":"n5172","id":5172,"level":2},
{"name":"n574","id":574,"level":1},
{"name":"n7292","id":7292,"level":1},
{"name":"n5161","id":5161,"level":2},
{"name":"n5169","id":5169,"level":0},
{"name":"n5162","id":5162,"level":2},
{"name":"n5164","id":5164,"level":2},
{"name":"n5166","id":5166,"level":0},
{"name":"n5167","id":5167,"level":2},
{"name":"n7293","id":7293,"level":1},
{"name":"n606","id":606,"level":1},
{"name":"n874","id":874,"level":2},
{"name":"n7297","id":7297,"level":1},
{"name":"n4141","id":4141,"level":1},
{"name":"n5374","id":5374,"level":2},
{"name":"n6290","id":6290,"level":2},
{"name":"n5375","id":5375,"level":2},
{"name":"n4104","id":4104,"level":2},
{"name":"n6284","id":6284,"level":0},
{"name":"n4101","id":4101,"level":1},
{"name":"n5377","id":5377,"level":2},
{"name":"n7477","id":7477,"level":2},
{"name":"n7478","id":7478,"level":2},
{"name":"n5378","id":5378,"level":2},
{"name":"n5379","id":5379,"level":2},
{"name":"n5252","id":5252,"level":1},
{"name":"n3521","id":3521,"level":2},
{"name":"n5206","id":5206,"level":2},
{"name":"n7329","id":7329,"level":2},
{"name":"n7436","id":7436,"level":1},
{"name":"n7392","id":7392,"level":2},
{"name":"n7459","id":7459,"level":2},
{"name":"n7460","id":7460,"level":2},
{"name":"n5362","id":5362,"level":2},
{"name":"n7461","id":7461,"level":2},
{"name":"n727","id":727,"level":2},
{"name":"n749","id":749,"level":2},
{"name":"n7463","id":7463,"level":2},
{"name":"n5367","id":5367,"level":2},
{"name":"n7458","id":7458,"level":1},
{"name":"n5368","id":5368,"level":2},
{"name":"n5369","id":5369,"level":2},
{"name":"n7466","id":7466,"level":2},
{"name":"n7467","id":7467,"level":2},
{"name":"n7468","id":7468,"level":2},
{"name":"n7469","id":7469,"level":2},
{"name":"n5370","id":5370,"level":2},
{"name":"n5371","id":5371,"level":2},
{"name":"n5372","id":5372,"level":2},
{"name":"n5373","id":5373,"level":2},
{"name":"n464","id":464,"level":1},
{"name":"n7470","id":7470,"level":2},
{"name":"n453","id":453,"level":2},
{"name":"n7471","id":7471,"level":2},
{"name":"n7472","id":7472,"level":2},
{"name":"n5359","id":5359,"level":1},
{"name":"n5376","id":5376,"level":2},
{"name":"n7474","id":7474,"level":2},
{"name":"n7475","id":7475,"level":2},
{"name":"n7476","id":7476,"level":2},
{"name":"n5360","id":5360,"level":1},
{"name":"n7480","id":7480,"level":2},
{"name":"n5504","id":5504,"level":2},
{"name":"n5380","id":5380,"level":2},
{"name":"n5361","id":5361,"level":1},
{"name":"n5333","id":5333,"level":1},
{"name":"n4092","id":4092,"level":1},
{"name":"n5334","id":5334,"level":2},
{"name":"n7426","id":7426,"level":1},
{"name":"n7430","id":7430,"level":0},
{"name":"n7431","id":7431,"level":1},
{"name":"n7437","id":7437,"level":2},
{"name":"n7438","id":7438,"level":2},
{"name":"n5346","id":5346,"level":2},
{"name":"n5347","id":5347,"level":2},
{"name":"n7441","id":7441,"level":2},
{"name":"n4152","id":4152,"level":2},
{"name":"n7432","id":7432,"level":1},
{"name":"n7434","id":7434,"level":1},
{"name":"n5341","id":5341,"level":2},
{"name":"n7433","id":7433,"level":1},
{"name":"n4102","id":4102,"level":0},
{"name":"n4054","id":4054,"level":1},
{"name":"n7330","id":7330,"level":2},
{"name":"n6260","id":6260,"level":0},
{"name":"n7331","id":7331,"level":1},
{"name":"n5207","id":5207,"level":2},
{"name":"n6282","id":6282,"level":1},
{"name":"n4138","id":4138,"level":0},
{"name":"n7332","id":7332,"level":2},
{"name":"n5203","id":5203,"level":1},
{"name":"n5204","id":5204,"level":1},
{"name":"n5205","id":5205,"level":1},
{"name":"n7341","id":7341,"level":2},
{"name":"n7457","id":7457,"level":2},
{"name":"n7342","id":7342,"level":2},
{"name":"n7343","id":7343,"level":2},
{"name":"n7344","id":7344,"level":2},
{"name":"n7345","id":7345,"level":2},
{"name":"n5233","id":5233,"level":2},
{"name":"n7347","id":7347,"level":2},
{"name":"n7348","id":7348,"level":2},
{"name":"n7365","id":7365,"level":2},
{"name":"n5250","id":5250,"level":2},
{"name":"n7361","id":7361,"level":2},
{"name":"n5246","id":5246,"level":2},
{"name":"n5247","id":5247,"level":2},
{"name":"n5248","id":5248,"level":2},
{"name":"n7363","id":7363,"level":2},
{"name":"n7364","id":7364,"level":2},
{"name":"n5249","id":5249,"level":2},
{"name":"n5364","id":5364,"level":2},
{"name":"n7366","id":7366,"level":2},
{"name":"n7367","id":7367,"level":2},
{"name":"n7368","id":7368,"level":2},
{"name":"n7369","id":7369,"level":2},
{"name":"n6235","id":6235,"level":0},
{"name":"n7350","id":7350,"level":1},
{"name":"n5242","id":5242,"level":2},
{"name":"n4067","id":4067,"level":2},
{"name":"n7358","id":7358,"level":2},
{"name":"n4066","id":4066,"level":2},
{"name":"n7359","id":7359,"level":2},
{"name":"n5243","id":5243,"level":2},
{"name":"n7360","id":7360,"level":2},
{"name":"n5244","id":5244,"level":2},
{"name":"n7351","id":7351,"level":1},
{"name":"n7371","id":7371,"level":2},
{"name":"n5254","id":5254,"level":2},
{"name":"n5251","id":5251,"level":2},
{"name":"n5253","id":5253,"level":2},
{"name":"n7374","id":7374,"level":2},
{"name":"n5255","id":5255,"level":2},
{"name":"n7375","id":7375,"level":2},
{"name":"n5256","id":5256,"level":2},
{"name":"n7376","id":7376,"level":2},
{"name":"n5257","id":5257,"level":2},
{"name":"n5258","id":5258,"level":2},
{"name":"n767","id":767,"level":1},
{"name":"n5236","id":5236,"level":2},
{"name":"n5237","id":5237,"level":2},
{"name":"n5238","id":5238,"level":2},
{"name":"n5239","id":5239,"level":2},
{"name":"n5235","id":5235,"level":1},
{"name":"n5241","id":5241,"level":2},
{"name":"n7354","id":7354,"level":2},
{"name":"n7355","id":7355,"level":2},
{"name":"n7356","id":7356,"level":2},
{"name":"n7357","id":7357,"level":2},
{"name":"n6236","id":6236,"level":0},
{"name":"n794","id":794,"level":1},
{"name":"n5261","id":5261,"level":1},
{"name":"n1169","id":1169,"level":2},
{"name":"n3256","id":3256,"level":2},
{"name":"n5274","id":5274,"level":2},
{"name":"n5275","id":5275,"level":2},
{"name":"n7393","id":7393,"level":2},
{"name":"n7400","id":7400,"level":1},
{"name":"n5291","id":5291,"level":1},
{"name":"n7378","id":7378,"level":1},
{"name":"n7379","id":7379,"level":1},
{"name":"n5262","id":5262,"level":1},
{"name":"n5278","id":5278,"level":2},
{"name":"n5280","id":5280,"level":2},
{"name":"n7380","id":7380,"level":1},
{"name":"n7381","id":7381,"level":1},
{"name":"n5263","id":5263,"level":1},
{"name":"n5264","id":5264,"level":1},
{"name":"n5265","id":5265,"level":1},
{"name":"n5276","id":5276,"level":2},
{"name":"n5277","id":5277,"level":2},
{"name":"n5267","id":5267,"level":1},
{"name":"n5268","id":5268,"level":1},
{"name":"n7394","id":7394,"level":2},
{"name":"n7395","id":7395,"level":2},
{"name":"n7382","id":7382,"level":1},
{"name":"n7383","id":7383,"level":1},
{"name":"n7384","id":7384,"level":1},
{"name":"n1269","id":1269,"level":2},
{"name":"n5281","id":5281,"level":2},
{"name":"n5282","id":5282,"level":2},
{"name":"n5269","id":5269,"level":1},
{"name":"n5270","id":5270,"level":1},
{"name":"n7385","id":7385,"level":1},
{"name":"n7387","id":7387,"level":1},
{"name":"n5283","id":5283,"level":2},
{"name":"n7396","id":7396,"level":2},
{"name":"n5287","id":5287,"level":1},
{"name":"n5285","id":5285,"level":2},
{"name":"n7398","id":7398,"level":2},
{"name":"n5286","id":5286,"level":2},
{"name":"n5272","id":5272,"level":1},
{"name":"n5294","id":5294,"level":2},
{"name":"n7401","id":7401,"level":2},
{"name":"n7464","id":7464,"level":1},
{"name":"n5288","id":5288,"level":2},
{"name":"n7399","id":7399,"level":2},
{"name":"n5289","id":5289,"level":2},
{"name":"n5290","id":5290,"level":2},
{"name":"n5292","id":5292,"level":2},
{"name":"n5293","id":5293,"level":2},
{"name":"n468","id":468,"level":0},
{"name":"n7451","id":7451,"level":0},
{"name":"n5352","id":5352,"level":0},
{"name":"n5830","id":5830,"level":0},
{"name":"n5348","id":5348,"level":0},
{"name":"n6154","id":6154,"level":0},
{"name":"n625","id":625,"level":0},
{"name":"n3892","id":3892,"level":1},
{"name":"n3894","id":3894,"level":1},
{"name":"n3893","id":3893,"level":2},
{"name":"n683","id":683,"level":1},
{"name":"n551","id":551,"level":1},
{"name":"n4051","id":4051,"level":1},
{"name":"n4079","id":4079,"level":2},
{"name":"n4052","id":4052,"level":0},
{"name":"n5303","id":5303,"level":2},
{"name":"n5304","id":5304,"level":2},
{"name":"n7407","id":7407,"level":2},
{"name":"n5305","id":5305,"level":2},
{"name":"n5306","id":5306,"level":2},
{"name":"n7427","id":7427,"level":2},
{"name":"n6251","id":6251,"level":2},
{"name":"n7428","id":7428,"level":2},
{"name":"n5330","id":5330,"level":2},
{"name":"n5310","id":5310,"level":1},
{"name":"n5331","id":5331,"level":2},
{"name":"n5332","id":5332,"level":2},
{"name":"n7425","id":7425,"level":2},
{"name":"n5335","id":5335,"level":2},
{"name":"n4076","id":4076,"level":0},
{"name":"n6221","id":6221,"level":0},
{"name":"n7349","id":7349,"level":0},
{"name":"n4149","id":4149,"level":1},
{"name":"n6286","id":6286,"level":2},
{"name":"n5297","id":5297,"level":2},
{"name":"n5296","id":5296,"level":2},
{"name":"n4150","id":4150,"level":2},
{"name":"n4151","id":4151,"level":2},
{"name":"n5299","id":5299,"level":2},
{"name":"n7404","id":7404,"level":2},
{"name":"n5300","id":5300,"level":2},
{"name":"n5295","id":5295,"level":2},
{"name":"n5301","id":5301,"level":2},
{"name":"n7405","id":7405,"level":2},
{"name":"n7406","id":7406,"level":2},
{"name":"n4077","id":4077,"level":1},
{"name":"n5308","id":5308,"level":2},
{"name":"n5307","id":5307,"level":1},
{"name":"n5309","id":5309,"level":2},
{"name":"n7408","id":7408,"level":2},
{"name":"n6239","id":6239,"level":0},
{"name":"n7447","id":7447,"level":1},
{"name":"n7420","id":7420,"level":2},
{"name":"n7421","id":7421,"level":2},
{"name":"n5323","id":5323,"level":2},
{"name":"n4057","id":4057,"level":2},
{"name":"n5324","id":5324,"level":2},
{"name":"n5325","id":5325,"level":2},
{"name":"n7422","id":7422,"level":2},
{"name":"n7409","id":7409,"level":1},
{"name":"n4145","id":4145,"level":2},
{"name":"n7423","id":7423,"level":2},
{"name":"n5326","id":5326,"level":2},
{"name":"n5311","id":5311,"level":1},
{"name":"n5327","id":5327,"level":2},
{"name":"n4058","id":4058,"level":2},
{"name":"n5328","id":5328,"level":2},
{"name":"n5329","id":5329,"level":2},
{"name":"n5168","id":5168,"level":2},
{"name":"n7424","id":7424,"level":2},
{"name":"n5312","id":5312,"level":1},
{"name":"n4093","id":4093,"level":1},
{"name":"n4094","id":4094,"level":1},
{"name":"n4095","id":4095,"level":1},
{"name":"n4096","id":4096,"level":1},
{"name":"n7429","id":7429,"level":2},
{"name":"n5336","id":5336,"level":2},
{"name":"n5337","id":5337,"level":2},
{"name":"n5338","id":5338,"level":2},
{"name":"n5339","id":5339,"level":2},
{"name":"n5313","id":5313,"level":2},
{"name":"n5340","id":5340,"level":2},
{"name":"n7410","id":7410,"level":1},
{"name":"n7411","id":7411,"level":1},
{"name":"n7435","id":7435,"level":2},
{"name":"n5342","id":5342,"level":2},
{"name":"n5343","id":5343,"level":2},
{"name":"n5344","id":5344,"level":2},
{"name":"n7439","id":7439,"level":2},
{"name":"n7440","id":7440,"level":2},
{"name":"n5345","id":5345,"level":2},
{"name":"n7442","id":7442,"level":2},
{"name":"n7443","id":7443,"level":2},
{"name":"n7444","id":7444,"level":2},
{"name":"n5349","id":5349,"level":2},
{"name":"n7445","id":7445,"level":2},
{"name":"n5350","id":5350,"level":2},
{"name":"n7446","id":7446,"level":2},
{"name":"n7448","id":7448,"level":1},
{"name":"n7449","id":7449,"level":2},
{"name":"n5351","id":5351,"level":2},
{"name":"n7450","id":7450,"level":2},
{"name":"n7412","id":7412,"level":2},
{"name":"n7413","id":7413,"level":2},
{"name":"n5319","id":5319,"level":2},
{"name":"n5316","id":5316,"level":2},
{"name":"n5321","id":5321,"level":2},
{"name":"n7414","id":7414,"level":2},
{"name":"n5314","id":5314,"level":2},
{"name":"n5315","id":5315,"level":2},
{"name":"n7415","id":7415,"level":2},
{"name":"n7416","id":7416,"level":2},
{"name":"n7419","id":7419,"level":2},
{"name":"n5320","id":5320,"level":2},
{"name":"n7417","id":7417,"level":2},
{"name":"n5317","id":5317,"level":2},
{"name":"n5322","id":5322,"level":2},
{"name":"n5318","id":5318,"level":2},
{"name":"n7418","id":7418,"level":2},
{"name":"n4160","id":4160,"level":0},
{"name":"n6259","id":6259,"level":0},
{"name":"n4113","id":4113,"level":1},
{"name":"n3928","id":3928,"level":2},
{"name":"n6266","id":6266,"level":0},
{"name":"n6267","id":6267,"level":2},
{"name":"n6283","id":6283,"level":0},
{"name":"n4333","id":4333,"level":0},
{"name":"n6395","id":6395,"level":0},
{"name":"n710","id":710,"level":1},
{"name":"n763","id":763,"level":2},
{"name":"n4467","id":4467,"level":2},
{"name":"n6539","id":6539,"level":1},
{"name":"n4335","id":4335,"level":1},
{"name":"n6397","id":6397,"level":1},
{"name":"n773","id":773,"level":0},
{"name":"n5449","id":5449,"level":0},
{"name":"n622","id":622,"level":0},
{"name":"n4445","id":4445,"level":1},
{"name":"n4450","id":4450,"level":1},
{"name":"n4451","id":4451,"level":1},
{"name":"n6520","id":6520,"level":0},
{"name":"n4452","id":4452,"level":0},
{"name":"n5354","id":5354,"level":0},
{"name":"n5355","id":5355,"level":0},
{"name":"n7453","id":7453,"level":0},
{"name":"n5353","id":5353,"level":0},
{"name":"n7454","id":7454,"level":0},
{"name":"n7455","id":7455,"level":0},
{"name":"n6540","id":6540,"level":0},
{"name":"n631","id":631,"level":0},
{"name":"n5450","id":5450,"level":0},
{"name":"n658","id":658,"level":2},
{"name":"n504","id":504,"level":0},
{"name":"n514","id":514,"level":1},
{"name":"n7456","id":7456,"level":0},
{"name":"n5356","id":5356,"level":1},
{"name":"n5357","id":5357,"level":0},
{"name":"n5358","id":5358,"level":0},
{"name":"n7295","id":7295,"level":0},
{"name":"n592","id":592,"level":2},
{"name":"n1358","id":1358,"level":2},
{"name":"n3","id":3,"level":0},
{"name":"n3778","id":3778,"level":0},
{"name":"n656","id":656,"level":0},
{"name":"n7153","id":7153,"level":0},
{"name":"n734","id":734,"level":1},
{"name":"n1011","id":1011,"level":2},
{"name":"n608","id":608,"level":1},
{"name":"n6263","id":6263,"level":0},
{"name":"n3662","id":3662,"level":0},
{"name":"n4195","id":4195,"level":2},
{"name":"n6312","id":6312,"level":2},
{"name":"n4196","id":4196,"level":1},
{"name":"n5481","id":5481,"level":2},
{"name":"n4418","id":4418,"level":1},
{"name":"n7452","id":7452,"level":0},
{"name":"n472","id":472,"level":0}],
"links":[
{"source":4073,"target":4053,"level":1},
{"source":4073,"target":6234,"level":0},
{"source":4073,"target":5179,"level":2},
{"source":4073,"target":5163,"level":3},
{"source":4073,"target":7303,"level":2},
{"source":4073,"target":542,"level":2},
{"source":4073,"target":5181,"level":2},
{"source":4073,"target":5182,"level":2},
{"source":4073,"target":5183,"level":2},
{"source":4073,"target":5184,"level":2},
{"source":4073,"target":5174,"level":1},
{"source":4073,"target":5176,"level":1},
{"source":4073,"target":7304,"level":2},
{"source":4073,"target":5185,"level":2},
{"source":4073,"target":5217,"level":2},
{"source":4073,"target":7305,"level":2},
{"source":4073,"target":7306,"level":2},
{"source":4073,"target":7307,"level":2},
{"source":4073,"target":7308,"level":2},
{"source":4073,"target":7309,"level":2},
{"source":4073,"target":7310,"level":2},
{"source":4073,"target":7311,"level":2},
{"source":4073,"target":4114,"level":1},
{"source":4073,"target":5186,"level":2},
{"source":4073,"target":7313,"level":2},
{"source":4073,"target":7314,"level":2},
{"source":4073,"target":5302,"level":2},
{"source":4073,"target":5187,"level":2},
{"source":4073,"target":4142,"level":2},
{"source":4073,"target":7316,"level":2},
{"source":4073,"target":5188,"level":2},
{"source":4073,"target":7318,"level":2},
{"source":4073,"target":7319,"level":2},
{"source":4073,"target":4074,"level":1},
{"source":4073,"target":5191,"level":2},
{"source":4073,"target":7320,"level":2},
{"source":4073,"target":7322,"level":2},
{"source":4073,"target":5194,"level":2},
{"source":4073,"target":7323,"level":2},
{"source":4073,"target":5196,"level":2},
{"source":4073,"target":5197,"level":2},
{"source":4073,"target":5198,"level":2},
{"source":4073,"target":5199,"level":2},
{"source":4053,"target":4075,"level":2},
{"source":4053,"target":4078,"level":2},
{"source":4053,"target":4072,"level":2},
{"source":4053,"target":4103,"level":1},
{"source":4053,"target":5177,"level":2},
{"source":4053,"target":441,"level":3},
{"source":4053,"target":4139,"level":1},
{"source":4053,"target":4140,"level":2},
{"source":4053,"target":5178,"level":2},
{"source":4053,"target":4143,"level":2},
{"source":4053,"target":6285,"level":2},
{"source":4053,"target":542,"level":2},
{"source":4075,"target":7460,"level":3},
{"source":4075,"target":4074,"level":1},
{"source":4075,"target":6235,"level":0},
{"source":4075,"target":767,"level":1},
{"source":4075,"target":5236,"level":2},
{"source":4075,"target":5237,"level":2},
{"source":4075,"target":5238,"level":2},
{"source":4075,"target":5239,"level":2},
{"source":4075,"target":5235,"level":1},
{"source":4075,"target":6236,"level":0},
{"source":4075,"target":794,"level":1},
{"source":4075,"target":5261,"level":1},
{"source":4075,"target":7378,"level":1},
{"source":4075,"target":7379,"level":1},
{"source":4075,"target":7392,"level":2},
{"source":4075,"target":5276,"level":2},
{"source":4075,"target":5277,"level":2},
{"source":4075,"target":5267,"level":1},
{"source":4075,"target":5268,"level":1},
{"source":4075,"target":7383,"level":1},
{"source":4075,"target":7384,"level":1},
{"source":4075,"target":1269,"level":2},
{"source":4075,"target":4075,"level":2},
{"source":4075,"target":5281,"level":2},
{"source":4075,"target":5282,"level":2},
{"source":4075,"target":7387,"level":1},
{"source":4075,"target":5283,"level":2},
{"source":4075,"target":7396,"level":2},
{"source":4075,"target":5287,"level":1},
{"source":4075,"target":5285,"level":2},
{"source":4075,"target":5286,"level":2},
{"source":4075,"target":5272,"level":1},
{"source":4103,"target":4141,"level":2},
{"source":4103,"target":4142,"level":2},
{"source":4103,"target":4102,"level":1},
{"source":4103,"target":4054,"level":2},
{"source":4103,"target":7330,"level":2},
{"source":4103,"target":4104,"level":2},
{"source":4103,"target":542,"level":2},
{"source":4103,"target":6260,"level":0},
{"source":4103,"target":5252,"level":1},
{"source":4103,"target":7331,"level":1},
{"source":4103,"target":5207,"level":2},
{"source":4103,"target":6282,"level":1},
{"source":4103,"target":4138,"level":1},
{"source":4103,"target":7332,"level":2},
{"source":4103,"target":5205,"level":1},
{"source":441,"target":5827,"level":0},
{"source":441,"target":3174,"level":2},
{"source":441,"target":6001,"level":2},
{"source":441,"target":4106,"level":1},
{"source":441,"target":3063,"level":2},
{"source":441,"target":582,"level":1},
{"source":441,"target":634,"level":1},
{"source":441,"target":5170,"level":1},
{"source":441,"target":791,"level":1},
{"source":441,"target":574,"level":1},
{"source":441,"target":7292,"level":1},
{"source":441,"target":5161,"level":2},
{"source":441,"target":5162,"level":2},
{"source":441,"target":7293,"level":1},
{"source":441,"target":606,"level":1},
{"source":4139,"target":5180,"level":1},
{"source":4140,"target":7386,"level":2},
{"source":6234,"target":5173,"level":0},
{"source":5163,"target":5162,"level":0},
{"source":542,"target":4092,"level":1},
{"source":542,"target":4052,"level":1},
{"source":542,"target":542,"level":2},
{"source":542,"target":5307,"level":1},
{"source":542,"target":5308,"level":2},
{"source":542,"target":5309,"level":2},
{"source":542,"target":7408,"level":2},
{"source":542,"target":6239,"level":0},
{"source":542,"target":4054,"level":1},
{"source":542,"target":7447,"level":1},
{"source":542,"target":7392,"level":2},
{"source":542,"target":7420,"level":2},
{"source":542,"target":5252,"level":2},
{"source":542,"target":7421,"level":2},
{"source":542,"target":5323,"level":2},
{"source":542,"target":4057,"level":2},
{"source":542,"target":5324,"level":2},
{"source":542,"target":5325,"level":2},
{"source":542,"target":7409,"level":1},
{"source":542,"target":4145,"level":2},
{"source":542,"target":7423,"level":2},
{"source":542,"target":5311,"level":2},
{"source":542,"target":5327,"level":2},
{"source":542,"target":4058,"level":2},
{"source":542,"target":5329,"level":2},
{"source":542,"target":7424,"level":2},
{"source":542,"target":4093,"level":1},
{"source":542,"target":4094,"level":1},
{"source":542,"target":4095,"level":1},
{"source":542,"target":4096,"level":1},
{"source":542,"target":7410,"level":1},
{"source":542,"target":7411,"level":1},
{"source":542,"target":7435,"level":2},
{"source":542,"target":5342,"level":2},
{"source":542,"target":5344,"level":2},
{"source":542,"target":7439,"level":2},
{"source":542,"target":7440,"level":2},
{"source":542,"target":5345,"level":2},
{"source":542,"target":7442,"level":2},
{"source":542,"target":7443,"level":2},
{"source":542,"target":7444,"level":2},
{"source":542,"target":5349,"level":2},
{"source":542,"target":5350,"level":2},
{"source":542,"target":7446,"level":2},
{"source":542,"target":7448,"level":1},
{"source":542,"target":7449,"level":2},
{"source":542,"target":5310,"level":1},
{"source":5176,"target":4142,"level":1},
{"source":5176,"target":5333,"level":1},
{"source":5176,"target":7430,"level":0},
{"source":5176,"target":7431,"level":1},
{"source":5176,"target":7437,"level":2},
{"source":5176,"target":7438,"level":2},
{"source":5176,"target":5346,"level":2},
{"source":5176,"target":5347,"level":2},
{"source":5176,"target":7432,"level":1},
{"source":5176,"target":7434,"level":1},
{"source":5176,"target":749,"level":2},
{"source":5176,"target":7433,"level":1},
{"source":4114,"target":4074,"level":2},
{"source":4114,"target":4113,"level":1},
{"source":4114,"target":6266,"level":0},
{"source":4114,"target":6267,"level":2},
{"source":5186,"target":7312,"level":2},
{"source":5186,"target":4142,"level":2},
{"source":7314,"target":5240,"level":2},
{"source":5240,"target":7352,"level":2},
{"source":5240,"target":7353,"level":2},
{"source":5302,"target":4074,"level":2},
{"source":5302,"target":4051,"level":2},
{"source":5302,"target":5194,"level":2},
{"source":4142,"target":7315,"level":2},
{"source":4142,"target":4141,"level":1},
{"source":4142,"target":6284,"level":0},
{"source":4142,"target":4101,"level":2},
{"source":4142,"target":5377,"level":2},
{"source":4142,"target":7478,"level":2},
{"source":4142,"target":5378,"level":2},
{"source":4142,"target":5379,"level":2},
{"source":4142,"target":5252,"level":2},
{"source":4142,"target":3521,"level":2},
{"source":4142,"target":5206,"level":2},
{"source":4142,"target":7436,"level":1},
{"source":4142,"target":7392,"level":2},
{"source":4142,"target":7459,"level":2},
{"source":4142,"target":7460,"level":2},
{"source":4142,"target":5362,"level":2},
{"source":4142,"target":7461,"level":2},
{"source":4142,"target":727,"level":2},
{"source":4142,"target":749,"level":2},
{"source":4142,"target":7463,"level":2},
{"source":4142,"target":5367,"level":2},
{"source":4142,"target":7458,"level":1},
{"source":4142,"target":5369,"level":2},
{"source":4142,"target":7467,"level":2},
{"source":4142,"target":7468,"level":2},
{"source":4142,"target":7469,"level":2},
{"source":4142,"target":5372,"level":2},
{"source":4142,"target":5373,"level":2},
{"source":4142,"target":464,"level":1},
{"source":4142,"target":5359,"level":1},
{"source":4142,"target":5360,"level":1},
{"source":4142,"target":5361,"level":1},
{"source":5188,"target":7317,"level":2},
{"source":4074,"target":7365,"level":2},
{"source":4074,"target":5250,"level":2},
{"source":4074,"target":5246,"level":2},
{"source":4074,"target":5247,"level":2},
{"source":4074,"target":5248,"level":2},
{"source":4074,"target":4074,"level":2},
{"source":4074,"target":7366,"level":2},
{"source":4074,"target":7367,"level":2},
{"source":4074,"target":7368,"level":2},
{"source":4074,"target":7369,"level":2},
{"source":4074,"target":6235,"level":0},
{"source":4074,"target":7350,"level":1},
{"source":4074,"target":5242,"level":2},
{"source":4074,"target":4067,"level":2},
{"source":4074,"target":4066,"level":2},
{"source":4074,"target":7359,"level":2},
{"source":4074,"target":7360,"level":2},
{"source":4074,"target":5244,"level":2},
{"source":4074,"target":7351,"level":1},
{"source":4074,"target":7371,"level":2},
{"source":4074,"target":5254,"level":2},
{"source":4074,"target":5251,"level":2},
{"source":4074,"target":5253,"level":2},
{"source":4074,"target":7374,"level":2},
{"source":4074,"target":5255,"level":2},
{"source":4074,"target":5256,"level":2},
{"source":4074,"target":7376,"level":2},
{"source":4074,"target":5257,"level":2},
{"source":4074,"target":5258,"level":2},
{"source":5196,"target":7324,"level":2},
{"source":5198,"target":7462,"level":2},
{"source":7462,"target":5363,"level":2},
{"source":5827,"target":5169,"level":0},
{"source":4106,"target":7300,"level":2},
{"source":4106,"target":608,"level":1},
{"source":4106,"target":6263,"level":0},
{"source":3063,"target":4101,"level":2},
{"source":582,"target":434,"level":2},
{"source":582,"target":7377,"level":2},
{"source":582,"target":5259,"level":2},
{"source":582,"target":5260,"level":2},
{"source":5260,"target":573,"level":2},
{"source":791,"target":5171,"level":2},
{"source":791,"target":7299,"level":2},
{"source":791,"target":765,"level":2},
{"source":791,"target":7298,"level":1},
{"source":791,"target":1156,"level":2},
{"source":791,"target":5172,"level":2},
{"source":5162,"target":5164,"level":2},
{"source":5162,"target":5166,"level":1},
{"source":5162,"target":5167,"level":2},
{"source":5166,"target":5310,"level":1},
{"source":5166,"target":7295,"level":0},
{"source":606,"target":874,"level":2},
{"source":606,"target":7297,"level":1},
{"source":606,"target":5311,"level":2},
{"source":4141,"target":5374,"level":2},
{"source":4141,"target":6290,"level":2},
{"source":4141,"target":5375,"level":2},
{"source":4141,"target":4104,"level":2},
{"source":4104,"target":4101,"level":2},
{"source":4101,"target":4102,"level":1},
{"source":5377,"target":7477,"level":2},
{"source":5252,"target":5235,"level":2},
{"source":5252,"target":7354,"level":2},
{"source":5252,"target":7355,"level":2},
{"source":5206,"target":7329,"level":2},
{"source":5367,"target":5368,"level":2},
{"source":5369,"target":7466,"level":2},
{"source":7469,"target":5370,"level":2},
{"source":7469,"target":5371,"level":2},
{"source":464,"target":7470,"level":2},
{"source":464,"target":453,"level":2},
{"source":464,"target":7472,"level":2},
{"source":453,"target":7471,"level":2},
{"source":5359,"target":5376,"level":2},
{"source":5359,"target":7474,"level":2},
{"source":5359,"target":7475,"level":2},
{"source":5359,"target":7476,"level":2},
{"source":5360,"target":7480,"level":2},
{"source":5360,"target":5504,"level":2},
{"source":5504,"target":5380,"level":2},
{"source":5333,"target":4092,"level":2},
{"source":5333,"target":7426,"level":1},
{"source":4092,"target":5334,"level":2},
{"source":4092,"target":4052,"level":1},
{"source":4092,"target":4051,"level":2},
{"source":4092,"target":7427,"level":2},
{"source":4092,"target":6251,"level":2},
{"source":4092,"target":7428,"level":2},
{"source":4092,"target":5330,"level":2},
{"source":4092,"target":5310,"level":2},
{"source":4092,"target":5331,"level":2},
{"source":4092,"target":5332,"level":2},
{"source":4092,"target":5335,"level":2},
{"source":5347,"target":7441,"level":2},
{"source":5347,"target":4152,"level":2},
{"source":7432,"target":5341,"level":2},
{"source":4102,"target":6259,"level":0},
{"source":4054,"target":625,"level":1},
{"source":4138,"target":5203,"level":1},
{"source":4138,"target":5204,"level":1},
{"source":4138,"target":6283,"level":0},
{"source":4138,"target":4096,"level":1},
{"source":5205,"target":7341,"level":2},
{"source":5205,"target":7457,"level":2},
{"source":5205,"target":7342,"level":2},
{"source":5205,"target":7343,"level":2},
{"source":5205,"target":7344,"level":2},
{"source":5205,"target":7345,"level":2},
{"source":5205,"target":5233,"level":2},
{"source":5205,"target":7348,"level":2},
{"source":5233,"target":7347,"level":2},
{"source":5250,"target":7361,"level":2},
{"source":5248,"target":7363,"level":2},
{"source":5248,"target":7364,"level":2},
{"source":7364,"target":5249,"level":2},
{"source":7364,"target":5364,"level":2},
{"source":4067,"target":7358,"level":2},
{"source":7359,"target":5243,"level":2},
{"source":5255,"target":7375,"level":2},
{"source":767,"target":5235,"level":1},
{"source":5235,"target":5241,"level":2},
{"source":5235,"target":7357,"level":2},
{"source":5241,"target":7356,"level":2},
{"source":794,"target":1169,"level":2},
{"source":794,"target":5274,"level":2},
{"source":794,"target":5275,"level":2},
{"source":794,"target":7393,"level":2},
{"source":794,"target":7400,"level":1},
{"source":1169,"target":3256,"level":2},
{"source":7400,"target":5291,"level":1},
{"source":7378,"target":5262,"level":1},
{"source":5262,"target":5278,"level":2},
{"source":5262,"target":5280,"level":2},
{"source":5262,"target":7380,"level":1},
{"source":5262,"target":7381,"level":1},
{"source":7380,"target":5263,"level":1},
{"source":7381,"target":5264,"level":1},
{"source":7381,"target":5265,"level":1},
{"source":5267,"target":7394,"level":2},
{"source":5267,"target":7395,"level":2},
{"source":5268,"target":7382,"level":1},
{"source":7384,"target":5269,"level":1},
{"source":7384,"target":5270,"level":1},
{"source":5269,"target":7385,"level":1},
{"source":5287,"target":5288,"level":2},
{"source":5287,"target":5292,"level":2},
{"source":5287,"target":5293,"level":2},
{"source":5285,"target":7398,"level":2},
{"source":5272,"target":5294,"level":2},
{"source":5272,"target":7401,"level":2},
{"source":5272,"target":7464,"level":1},
{"source":5288,"target":7399,"level":2},
{"source":7399,"target":5289,"level":2},
{"source":7399,"target":5290,"level":2},
{"source":468,"target":7451,"level":0},
{"source":7451,"target":5352,"level":0},
{"source":5830,"target":5348,"level":0},
{"source":6154,"target":625,"level":0},
{"source":625,"target":3892,"level":1},
{"source":625,"target":3894,"level":1},
{"source":625,"target":683,"level":1},
{"source":625,"target":551,"level":1},
{"source":3892,"target":3893,"level":2},
{"source":4051,"target":4079,"level":2},
{"source":4051,"target":4052,"level":1},
{"source":4051,"target":5303,"level":2},
{"source":4051,"target":5304,"level":2},
{"source":4051,"target":7407,"level":2},
{"source":4051,"target":5305,"level":2},
{"source":4051,"target":5306,"level":2},
{"source":4052,"target":6221,"level":0},
{"source":4052,"target":4149,"level":1},
{"source":4052,"target":6286,"level":2},
{"source":4052,"target":5297,"level":2},
{"source":4052,"target":4150,"level":2},
{"source":4052,"target":4151,"level":2},
{"source":4052,"target":5299,"level":2},
{"source":4052,"target":7404,"level":2},
{"source":4052,"target":5300,"level":2},
{"source":4052,"target":5295,"level":2},
{"source":4052,"target":5301,"level":2},
{"source":4052,"target":7406,"level":2},
{"source":4052,"target":4077,"level":1},
{"source":5310,"target":7412,"level":2},
{"source":5310,"target":7413,"level":2},
{"source":5310,"target":5313,"level":2},
{"source":5310,"target":5319,"level":2},
{"source":5310,"target":5316,"level":2},
{"source":5310,"target":5321,"level":2},
{"source":5310,"target":7417,"level":2},
{"source":5310,"target":5317,"level":2},
{"source":5310,"target":5322,"level":2},
{"source":5310,"target":5318,"level":2},
{"source":5310,"target":7418,"level":2},
{"source":5332,"target":7425,"level":2},
{"source":4076,"target":6221,"level":0},
{"source":4076,"target":7349,"level":0},
{"source":5297,"target":5296,"level":2},
{"source":5295,"target":7405,"level":2},
{"source":4077,"target":5308,"level":2},
{"source":5307,"target":7447,"level":1},
{"source":6239,"target":4160,"level":0},
{"source":5324,"target":7422,"level":2},
{"source":7409,"target":5311,"level":1},
{"source":7409,"target":5312,"level":1},
{"source":7423,"target":5326,"level":2},
{"source":4058,"target":5328,"level":2},
{"source":5329,"target":5168,"level":2},
{"source":4094,"target":7429,"level":2},
{"source":4094,"target":5336,"level":2},
{"source":4094,"target":5337,"level":2},
{"source":4094,"target":5338,"level":2},
{"source":4094,"target":5339,"level":2},
{"source":4095,"target":5313,"level":3},
{"source":4095,"target":5340,"level":2},
{"source":5313,"target":7414,"level":2},
{"source":5342,"target":5343,"level":2},
{"source":5349,"target":7445,"level":2},
{"source":7449,"target":5351,"level":2},
{"source":5351,"target":7450,"level":2},
{"source":5316,"target":7419,"level":2},
{"source":7414,"target":5314,"level":2},
{"source":7414,"target":5315,"level":2},
{"source":5314,"target":7415,"level":2},
{"source":5315,"target":7416,"level":2},
{"source":7419,"target":5320,"level":2},
{"source":4113,"target":3928,"level":2},
{"source":4333,"target":6395,"level":0},
{"source":4333,"target":710,"level":1},
{"source":4333,"target":6539,"level":1},
{"source":4333,"target":4335,"level":1},
{"source":4333,"target":6397,"level":1},
{"source":4333,"target":773,"level":1},
{"source":710,"target":763,"level":2},
{"source":710,"target":4467,"level":2},
{"source":773,"target":6540,"level":0},
{"source":5449,"target":622,"level":0},
{"source":622,"target":4445,"level":1},
{"source":4450,"target":4451,"level":1},
{"source":4451,"target":608,"level":1},
{"source":6520,"target":4452,"level":0},
{"source":6520,"target":5354,"level":0},
{"source":6520,"target":5355,"level":0},
{"source":4452,"target":7453,"level":0},
{"source":5355,"target":7455,"level":0},
{"source":7453,"target":5353,"level":0},
{"source":5353,"target":7454,"level":0},
{"source":631,"target":5450,"level":0},
{"source":631,"target":658,"level":2},
{"source":504,"target":514,"level":1},
{"source":504,"target":7456,"level":0},
{"source":504,"target":5356,"level":1},
{"source":7456,"target":5357,"level":0},
{"source":7456,"target":5358,"level":0},
{"source":592,"target":1358,"level":2},
{"source":3,"target":3778,"level":0},
{"source":656,"target":7153,"level":0},
{"source":656,"target":734,"level":1},
{"source":734,"target":1011,"level":2},
{"source":3662,"target":4195,"level":2},
{"source":3662,"target":6312,"level":2},
{"source":3662,"target":4196,"level":1},
{"source":3662,"target":5481,"level":2},
{"source":3662,"target":4418,"level":1},
{"source":3662,"target":7452,"level":0},
{"source":3662,"target":472,"level":0}
]}

index.html

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>Sticky force directed graph with zoom, pan, labels and styling - D3 Version 4 Example</title>
<style>

.node text {
	fill: white;
}

.link {
	stroke-width: 3px;
}

.link.level0 {
	stroke: #f00;
}

.link.level1 {
	stroke: #fcd43f;
}

.link.level2 {
	stroke: #57a7d1;
}

.node circle {
	cursor: move;
	fill: #ccc;
	stroke: #000;
	stroke-width: 1.5px;
}

.node circle {
	fill: #f00;
}

.node.level0 circle {
fill: #59c169;

}

</style>
<body>
	<div id="mainDiv" style="width: 960px; height: 600px; background-color: black;">
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script>
	
var height = 600;
var width = 960;

var zoom = d3.zoom()
	.scaleExtent([0.1, 8])
	.on("zoom", zoomed);

var svg = d3.select("#mainDiv").append("svg")
	.attr("width", width)
	.attr("height", height)
	.call(zoom)
	.append("g")
	.attr("id", "topG");

// sets the initial zoom level and calls zoom manually
zoom.scaleTo(d3.select("svg"),0.35);

// If zoom hits limit the mousewheel events revert to scrolling the page. This
// stop this behaviour. There is probably a better way to stop event propogation after
// hitting max/min scale, but this works.
window.onwheel = function(){ return false; }

var simulation = d3.forceSimulation()
	.force("link", d3.forceLink().id(function(d) { return d.id; }).distance(40))
	.force("charge", d3.forceManyBody())
	// sets a radius to reduce node overlap
	.force("collision", d3.forceCollide(12))
	.force("center", d3.forceCenter(width / 2, height / 2));

d3.json("example.json", function(error, graph) {
	if (error) throw error;

	var link = svg.append("g")
		.attr("class", "links")
		.call(d3.zoomTransform)
		.selectAll("line")
		.data(graph.links)
		.enter().append("line")
		.classed("link", true)
		.each(function (d) {
			var level = d.level;
			d3.select(this)
			.classed("level"+level, true);
		});

var node = svg.append("g")
	.attr("class", "nodes")
	.selectAll("circle")
	.data(graph.nodes)
	.enter().append("g").attr("class", "node")
	.each(function (d) {
		var level = d.level;
		d3.select(this)
		.classed("level"+level, true);
	})
	.on('mousedown', function() { d3.event.stopPropagation(); })
	.call(d3.drag()
		.on("start", dragstarted)
		.on("drag", dragged)
		.on("end", dragended));
    
var circle = node.append("circle")
	.attr("r", 12);

	node.append("text")
		.attr("dx", 12)
		.attr("dy", ".35em")
		.text(function(d) { return d.name });
      
	simulation
		.nodes(graph.nodes)
		.on("tick", ticked)

	simulation.force("link")
		.links(graph.links);

	function ticked()
	{
		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; });

		node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });

		// if close to stable layout stop the simulation as only marginal improvements to
		// the layout are achieved and our focus is on a quick render. Set the nodes to
		// 'fixed' to keep them in position.
		// Note also that on 'stop' the 'end' event/method will not be triggered.
		if (simulation.alpha() < 0.015)
		{
			simulation.stop();
			simulation.force("fixed", setFixed(node));
		}
	}

	function dragstarted(d)
	{
		d3.event.sourceEvent.stopPropagation();
		d3.select(this).classed("dragging", true);
		d.fixed = false;
		d.classed("fixed", false);
	}

	function dragged(d) {
		d3.select(this).attr("cx", d.x = d3.event.x).attr("cy", d.y = d3.event.y);
		ticked();
	}

	function dragended(d) {
		d3.select(this).classed("dragging", false);
		d.fixed = true;
		d.classed("fixed", true);
	}
});

function setFixed(node)
{
	node.classed('fixed', true);
	node.each(function(d){
		d.fixed = true;
	});
}

function zoomed()
{
	var topG = d3.select("#topG");
	topG.attr("transform", "translate(" + d3.event.transform.x+","+d3.event.transform.y + ")scale(" + d3.event.transform.k + ")");
}

</script>
</div>
</body>
</html>

preview.png

thumbnail.png