Old school D3 from simpler times

All examples By author By category About

djjupa

Full window Github gist

Collapsable force layout with nested selections

The json data has to have nested elements called "children"

<meta charset="utf-8" />
        
<link href='https://fonts.googleapis.com/css?family=Life+Savers|Didact+Gothic' rel='stylesheet' type='text/css'>		
<meta charset="utf-8" />
  
<style>
    .node {
      stroke: #009900;
      stroke-width: 1.5px;
      color: #009900;
     
    }
     
     
    .node text {
      pointer-events: none;
      font: 15px sans-serif;
      stroke-width: 0px;
    }
     
    .link {
      stroke: #999;
      /* stroke-opacity: 2.6; */
    }
     
     
     
    path.link {
      fill: none;
      stroke-width: 2px;
    }
     
     
    marker#end {
      fill: #999;
     
    }
     
    line {
      stroke: #000;
      stroke-width: 1.5px;
    }
</style>

<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>

<body>

<script>
    var w = 1200,
        h = 800,
        maxNodeSize = 50,
        root;
     
    var vis;
    var force = d3.layout.force(); 
    
    vis = d3.select("body").append("svg");
     
    d3.json("collapsableforcelayoutwithicons.json", function(json) {
     
    	root = json;
    	root.fixed = true;
    	root.x = w / 2;
    	root.y = 120;
     
     
            // Build the arrow
    	var defs = vis.insert("svg:defs").selectAll("marker")
    	    .data(["end"]);
     
     
    	defs.enter().append("svg:marker")
    	    .attr("id", "end")               // As explained here: https://www.d3noob.org/2013/03/d3js-force-directed-graph-example-basic.html
    	    //.attr("viewBox", "0 -5 10 10")
    	    .attr("refX", 10)
    	    .attr("refY", 0)
    	    .attr("markerWidth", 6)
    	    .attr("markerHeight", 6)
    	    .attr("orient", "auto")
    	  .append("svg:path")
    	    .attr("d", "M0,-5L10,0L0,5");
     
    	   update();
    });
    
    
    /**
     *   
     */
    function update() {
        console.log('entered update');
    	
        nodes = flatten(root),
        links = d3.layout.tree().links(nodes);
        
       // Start the force layout.
      force.nodes(nodes)
          	.links(links)
          	.gravity(0.05)
    		.charge(-1500)
    		.linkDistance(100)
    		.friction(0.5)
    		.linkStrength(function(l, i) {return 1; })
    		.size([w, h])
    		.on("tick", tick)
          	.start();
       
    	var i = 0;
    	
    
      // Update the paths
      var path = vis.selectAll("path.link")
    	    .data(links, function(d) { return d.target.id; });
    	    
      path.enter().append("svg:path")
    	    .attr("class", "link")
    	    .attr("marker-end", "url(#end)")
    	    .style("stroke", "#ccc");
    	      
      // Exit any old paths.
      path.exit().remove();
      
    
      // Update the nodes…
      var node = vis.selectAll("g.node")
          .data(nodes, function(d) { return d.id; });
    
    
      // Enter any new nodes.
      var nodeEnter = node.enter().append("svg:g")
          .attr("class", "node")
          .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
          .on("click", click)
          //.on("mouseover", showNodeDetails)
          //.on("mouseout", hideNodeDetails)
          .call(force.drag)
          .each(getPersonalDataNodes)
          ;
    
      // Add the circles to the nodes   
      nodeEnter.append("svg:circle")
          .attr("r", setCircleRadius)
          .style("fill", "white")
          .style("stroke", color)
          .style("stroke-width", function(d) { return d.root ? 0 : 1.5})
          .style("opacity", function(d) { return d.root ? 0 : 1})
          ;
      
      
      // Add text to the node (as defined by the json file) 
      nodeEnter.append("svg:text")
          .attr("class", "nodetext")
          .attr("text-anchor", "middle")
          .attr("dx", function(d) { return (d.logowidth/2)|| 16/2; })
          .attr("dy", function(d) { return (d.logoheight/2 + 15) || 16/2 + 15; })
          .text(function(d) { return d.name; });
          
    
            	
      //Add an image to the node
      nodeEnter.append("svg:image")
          .attr("xlink:href",  function(d) { return d.logo;})
          .attr("x", function(d) { return (0 - (d.logowidth/2)) || -16/2;})
          .attr("y", function(d) { return (0 - (d.logoheight/2)) || -16/2;})
          .attr("height", function(d) { return d.logoheight || 16;})
          .attr("width", function(d) { return d.logowidth || 16;})
          //.attr("height", 26)
          //.attr("width", 26);
          ;
    		
      // Exit any old nodes.
      node.exit().remove();
      
    
      // Re-select for update.
      path = vis.selectAll("path.link");
      node = vis.selectAll("g.node");
      
      /*
       * The tick function for the un-nested nodes
       */
      function tick() {
        // Draw curved paths
        path.attr("d", function(d) {
    	
    		 var dx = d.target.x - d.source.x,
    	         dy = d.target.y - d.source.y,
    	         dr = Math.sqrt(dx * dx + dy * dy); //*(Math.random() < 0.5 ? 1 : -1)*(Math.random()/10);
    	    return 	"M" + d.source.x + "," 
    	    			+ d.source.y 
    	    			+ "A" + dr + "," 
    	    			+ dr + " 0 0,1 " 
    	    			+ d.target.x + "," 
    	    			+ d.target.y;
    	});
    		
        node.attr("transform", nodeTransform );    
      }
    }
    
    
    /**
      * Display the children of the nested element:
      * - Position and fix the root node  
      * - Flatten the array of nodes (store it on )
      *  
      */ 
      function getPersonalDataNodes(treenode, i) {
        //console.log('entered getPersonalDataNodes');
        
        var vis2 = d3.select(this);
    
    	// Set the fix root    
        treenode.personaldata.fixed = true;
        treenode.personaldata.x = 0;
        treenode.personaldata.y = 0;
    
    	var icon_size = 16;
    
    	// Flatten the structure - get the array of personaldata objects
        var personaldataNodes = flatten(treenode.personaldata);
            
        // Create the links from the nodes to the root - using the "tree"
        // https://github.com/mbostock/d3/wiki/Tree-Layout 
        var sublinks = d3.layout.tree().links(personaldataNodes);
    	
        // Start the force layout.
    	var forcepii = d3.layout.force()
      		.nodes(personaldataNodes)
      		.links(sublinks)
      		.gravity(-0.005)
    		.linkDistance(50)
         	.start();     
        
         
        // 
        var piilinks = vis2.selectAll("line.piilink")
    	    .data(sublinks, function(d) { return d.target.id; }); // link nodes according to the nodes created during flattning 
    	    	    
    	// Attach a line	    
    	piilinks.enter().append("svg:line")
    	    .attr("class", "piilink")
    	    .style("stroke", "#ccc");
    	      
    	
    	// Exit any old paths.
    	piilinks.exit().remove();
        
        
        // Select the nodes
        var pii = vis2.selectAll("circle.pii")
        	.data(personaldataNodes, function(d) { return d.id; });
        
    	// Group them together
    	var piiEnter = pii.enter().append("svg:g")
            .attr("class", "piinode")
            .attr("transform", function(treenode) { return "translate(" + treenode.x + "," + treenode.y + ")"; })
    		.call(forcepii.drag)
    		;
            
    	// Add a circle        
    	piiEnter.append("svg:circle")
            .attr("class", "pii")
            .attr("r", 5)
    		.style("fill", "lightblue")
      		.style("stroke", "black")
      		;
      		
    	
    	// Add text to the node (as defined by the json file) 
    	piiEnter.append("svg:text")
    		.attr("class", "piinodetext")
    		.attr("text-anchor", "middle")
    		.attr("dx", function(treenode) { return 16/2; })
    		.attr("dy", function(treenode) { return 16/2 + 15; })
    		.text(function(treenode) { return treenode.type; });
    	  
       
    	pii.exit().remove();
    	
    	// Restart
    	sublinks = vis2.selectAll("line.piilinks");
    	personaldataNodes = vis2.selectAll("circle.pii");
    
    	/*
    	 * Tick function for the nested arrays
    	 */
    	forcepii.on("tick", function(treenode){
    		
    		piilinks.attr("x1", function(treenode) { return treenode.source.x; })
    		        .attr("y1", function(treenode) { return treenode.source.y; })
    		        .attr("x2", function(treenode) { return treenode.target.x; })
    		        .attr("y2", function(treenode) { return treenode.target.y; });
    
    		pii.attr("transform", function(treenode) { return "translate(" + treenode.x + "," + treenode.y + ")"; })
        });
        
        
        
      }
    
    
    
    
    
    /**
     * Color leaf nodes dark blue #3182bd, and packages white or blue.
     * dark blue #3182bd
     * light blue #c6dbef
     * orange #fd8d3c
     */ 
    function color(d) {
      return d._children ? "#3182bd" : d.children ? "c6dbef" : "fd8d3c";
    }
    
    
    /**
     * Toggle children on click.
     */ 
    function click(d) {
      //console.log('entered click');
      
      if (d.children) {
        d._children = d.children;
        d.children = null;
      } else {
        d.children = d._children;
        d._children = null;
      }
      
      update();
    }
    
    
    
    /**
     * Returns a list of all nodes under the root.
     */ 
    function flatten(root) {
      
      var nodes = []; 
      var i = 0;
      
      function recurse(node) {
        if (node.children) 
        	node.children.forEach(recurse);
        if (!node.id) 
        	node.id = ++i;
        nodes.push(node);
      }
    
      recurse(root);
      return nodes;
    }
    
    
    /**
     * Gives the coordinates of the border for keeping the nodes inside a frame
     * https://bl.ocks.org/mbostock/1129492
     */ 
    function nodeTransform(d) {
    	
    	d.x =  Math.max(maxNodeSize, Math.min(w - (d.logowidth/2 || 16/2), d.x));
        d.y =  Math.max(maxNodeSize, Math.min(h - (d.logoheight/2 || 16/2), d.y));
        return "translate(" + d.x + "," + d.y + ")";
    }
    
    /**
     * 
     * @param {Object} d
     */
    function setCircleRadius(d) {
    	
    	if(d.logowidth)
    		radius = d.logowidth/2 + 15;
    	else
    		radius = 16/2 + 15;
    	
    	d.radius = radius;
    	//console.log('d.id=' + d.id + 'radius=' + radius);
    	
    	return d.radius;
    }
</script>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js