d3 force directed graph - Archimate notation

zoom, drag, legend

by svorad

HTML

<script type="text/javascript" src="https://d3js.org/d3.v3.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>

<div id="graphapi-default" class="d3 forcedirected d3-processed"></div>

<!--

d3 Force directed tree 
Vizualization of relations between Drupal nodes using the Archimate notation 

Uses Drupal 7 modules:

Relation (7.x-1.2)
Relation UI ( 7.x-1.2)
Relation Add ( 7.x-1.6)
Views (7.x-3.14+7-dev)
D3 (7.x-1.0-alpha3)
D3 Views (7.x-1.0-alpha3)
Graph API (7.x-1.x-dev)
Relation Graphs (7.x-1.x-dev)
Views Contextual Filters OR  (7.x-1.1)
Viewfield (7.x-2.1)

Files to modify: 
sites/all/modules/d3/libraries/d3.forcedirected

Documentation on the setup of Drupal view: 
https://www.drupal.org/node/1392374


Drupal Views export:

$view = new view();
$view->name = 'vztahy_archimate';
$view->description = '';
$view->tag = 'default';
$view->base_table = 'node';
$view->human_name = 'Vzťahy Archimate - node';
$view->core = 7;
$view->api_version = '3.0';
$view->disabled = FALSE; /* Edit this to true to make a default view disabled initially */

/* Display: Master */
$handler = $view->new_display('default', 'Master', 'default');
$handler->display->display_options['title'] = 'Vzťahy a závislosti';
$handler->display->display_options['use_more_always'] = FALSE;
$handler->display->display_options['link_display'] = 'page';
$handler->display->display_options['access']['type'] = 'perm';
$handler->display->display_options['cache']['type'] = 'none';
$handler->display->display_options['query']['type'] = 'views_query';
$handler->display->display_options['exposed_form']['type'] = 'basic';
$handler->display->display_options['exposed_form']['options']['submit_button'] = 'Použiť';
$handler->display->display_options['pager']['type'] = 'none';
$handler->display->display_options['pager']['options']['offset'] = '0';
$handler->display->display_options['style_plugin'] =...

CSS

#graphapi-default {
  font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
}

JavaScript

$(function () {

var exampleNodes =  [
  {"name":"Bunka RFO","group":1,"data":
    {"title":"Bunka RFO","uri":"/infra/bunka-rfo","content":"373"}},	
  {"name":"CISMA","group":1,"data":
    {"title":"CISMA","uri":"/aplikacia/cisma","content":"370"}},
  {"name":"MEP (MVSR)","group":1,"data":
    {"title":"MEP (MVSR)","uri":"/aplikacia/mep-mvsr","content":"370"}},
  {"name":"Portál MV SR","group":1,"data":
    {"title":"Portál MV SR","uri":"/aplikacia/portal-mv-sr","content":"377"}
  }
];   // in Drupal views field and in d3 views setup, "content" is the type of the node
  
var exampleLinks =  [
	{"data":{"color":"361"},"source":0,"target":1,"value":null},
  {"data":{"color":"360"},"source":1,"target":2,"value":null},
  {"data":{"color":"362"},"source":1,"target":3,"value":null}
]; // in Drupal views field and in d3 views setup, "relationTypeId" is the id of the taxonomy term set in a field in the relation content type
  
  
    var width  = (750),  // within Drupal: settings.config.width
        height = (600),   // within Drupal: settings.config.width
        nodes  = exampleNodes,  // within Drupal: settings.nodes
        links  = exampleLinks,  // within Drupal: settings.links
        xPosun = -50;  // alternatively adjust the center of the graph
				yPosun = -30;  // alternatively adjust the center of the graph
		
	//console.log(JSON.stringify(nodes)); 
  
  // Colors of arrows  https://htmlcolorcodes.com/	
	/*var colorUsedBy = "#1e8449";
	var colorRealization = "#a04000";
	var colorAggregation = "#6c3483";
	var colorComposition = "#1f618d"; 
	var colorAssociation = "#616a6b"; 
	var colorCompositionFill = "#a9cce3"; 	*/
	var colorUsedBy = "black";
	var colorAssignment = "black";
	var colorAggregation = "black";
	var colorComposition = "black";
	var colorAssociation = "black";
	var colorDarkFill = "gray"; 		
	var colorLightFill = "white";
	var arrowOpacity = "0.5";
	var arrowStrokeWidth = "1";
		
    var force = d3.layout.force()
      .size([width, height])
	 ...