Collapsible Force Layout (Sample 3 collapsible into one node)

Basic Force Layout

Serves as a basis for other force layout examples.

forked from erkal's block: Collapsible Force Layout (Sample 3 collapsible into one node)

<!DOCTYPE html>
<meta charset="utf-8"> 
<html xmlns="https://www.w3.org/1999/xhtml">
<script charset="utf-8" src="../d3/d3.js"></script>
<script data-require="jquery" data-semver="2.0.3" src="https://code.jquery.com/jquery-2.0.3.min.js"></script>
<style>

/*.node circle {*/
/*  cursor: crosshair;*/ 
/*  stroke: #fff;*/
/*  stroke-width: 1.5px;*/
/*}*/

/*.node text {*/
/*  font: 11px calibri, arial, sans-serif;*/
/*  pointer-events: none;*/
/*  text-anchor: middle;*/
/*}*/
 
/*line.link {*/
/*  fill: none;*/
/*  stroke: #999;*/
/*  stroke-width: 1px;*/
/*  stroke-dasharray: 2 2;*/
/*}*/

.node circle {
  cursor: pointer; 
  stroke: #3a90bf;
  stroke-width: 20px;
}
  
.node text {
  font: 14x sans-serif;
  pointer-events: none;
  text-anchor: left;
/*   color: "blue" ; */
}

line.link {
  fill: none;
  stroke: #9ecae1;
  stroke-width: 1.5px;
}
</style>

</head>

<body>

e.dispatchEvent(evt);
//    nodeEnter.on("click", click)
    evt.stopPropagation()
    
    
  }); //}
};
  
  
  console.log(nodes2)
  var newNodes = [];
  for(i=nodes2.length; i>=0; i--){
    newNodes.push(nodes2[i])
  }
  console.log(nodes2.length)
  
  
// for(i=0;i<name.length;i++){
//   d3.select().click();
//  $('#D').d3Click();
//  simulateClick('#'+name[i])
// $('#'+parentschildren[i]).d3Click();
// }
 
// $('#PARENT').d3Click();

$('#name').d3Click();

for(i=0;i<newNodes.length;i++){
//   d3.select().click();
//  $('#D').d3Click();
 //simulateClick('#'+parentschildren[i])
 if(newNodes[i]){
   $('#'+newNodes[i]).d3Click();
 }
 
}
 
$('#PARENT').d3Click();

// $('#PARENT').d3Click();
    }
    
    
  
  
  
       
    function update(d) {
      
      var nodes = flatten(root),
          links = d3.layout.tree().links(nodes);

// Restart the force layout.
      force
          .nodes(nodes)
          .links(links)
          .start();

// Update links.
      link = link.data(links, function(d) { return d.target.id; });

link.exit().remove();

link.enter().insert("line", ".node")
          .attr("class", "link");

// Update nodes.
      node = node.data(nodes, function(d) { return d.id; });

// Exit any old links.
      node.exit().remove();
      
      // Enter any new nodes.
      var nodeEnter = node.enter().append("g")
          .attr("class", "node")
          .on("click", click)
          .call(force.drag)
          .attr("href", function(d) { return d.link; });

nodeEnter.append("svg:a")
      .attr("xlink:href", function(d){return d.link;})
      .append("circle").attr('id', function(d){ return d.name})
          .attr("r", function(d) { return Math.sqrt(d.size) / 15 || 3.5; });

nodeEnter.append("text")
          .attr("dy", "0.35em")
          .attr("dx", "1em")
          .text(function(d) { return d.name; });

node.select("circle")
          .style("fill", "#ff7400")
      .style("stroke-width", "2px");
          
          
          if(parentschildren.length<1){
          node.filter(function(d){
            //console.log(d.name)
            return d.name === 'PARENT'
          }).each(function(d){
            for(i=0;i<d.children.length;i++){
              parentschildren.push(d.children[i].name);
            }
            
          });
          }
          
//           document.getElementById('D').click();
          console.log(parentschildren)
          
        //$("#D").click();

}

function tick(d) {
      // sets the bounding box
      node.attr("cx", function(d) { return d.x = Math.max(15, Math.min(width - 15, d.x)); })
      .attr("cy", function(d) { return d.y = Math.max(15, Math.min(height - 15, 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; });

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

function color(d) {
//        console.log(d)
       return leafColor(d.parentname)
    }
    
    function neighboring(a, b) {
      return a.index == b.index || linkedByIndex[a.index + "," + b.index];
    }

// Toggle children on click.
    function click(d) {
      if (d3.event.defaultPrevented) return; // ignore drag
      if (d.children) {
        d._children = d.children;
        d.children = null;
      } else {
        d.children = d._children;
        d._children = null;
      }
      update();
      
      
      
//       // marks the clicked node
//       d3.selectAll(".link").transition().duration(500)
//       .style("stroke-width", function(o) {
//         return o.target === d || o.target === d ? 3 : 1;
//       }).style("stroke", function(o) {
//         return o.target === d || o.target === d ? "red" : "grey";
//       });
      
//       d3.selectAll(".node").transition().duration(500)
//         .style("stroke-width", function(o) {
//           return neighboring(d, o) ? 1 : 0;
//         }).style("stroke", function(o) {
//           return neighboring(d, o) ? "red" : "white";
//         });
    }

// Returns a list of all nodes under the root.
    function flatten(root) {
      var nodes = [], i = 0; 
 
      function recurse(node) {
        if (node.children) {
          nodes2.push(node.name)
          node.children.forEach(recurse);
        }
        if (!node.id) node.id = ++i;
        nodes.push(node);
    }
  
      recurse(root);
      console.log(nodes2)
      return nodes;
    }
    
    </script>

</div>    
</div>
</div>

</body>
</html>

Modified http://code.jquery.com/jquery-2.0.3.min.js to a secure url

https://code.jquery.com/jquery-2.0.3.min.js

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