VisDock in Collapsible Force Layout

The Collapsible Force Layout not only allows users to drag and drop nodes but also click high-hierarchical nodes to collapse the children under them. The VisDock toolkit has been integrated into the Collapsible Force Layout example built with D3.js (found here) by Mike Bostock. Using selection and other toolkits, users can query these nodes in the force layout environment. For more information about VisDock, please cick on the link.

<!DOCTYPE html>
<meta charset="utf-8">
<title>Force-Directed Graph</title>
<style>

.node {
  cursor: pointer;
  stroke: #3182bd;
  stroke-width: 1.5px;
}

.link {
  fill: none;
  stroke: #9ecae1;
  stroke-width: 1.5px;
}

</style>
<body>
<link href="https://rawgithub.com/VisDockHub/NewVisDock/master/master/visdock.css" rel="stylesheet" type="text/css"/>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://rawgithub.com/visdockhub/newvisdock/master/master/visdock.js"></script>
<script src="https://rawgithub.com/visdockhub/newvisdock/master/master/2d.js"></script>
<script src="https://rawgithub.com/visdockhub/newvisdock/master/master/intersectionutilities.js"></script>
<script src="https://rawgithub.com/visdockhub/newvisdock/master/master/visdock.utils.js"></script> 
<script>

var width = 960,
    height = 500,
    root;

VisDock.init("body", {width: 960, height: 700});
AnnotatedByData.layerTypes = ["circle"];
var viewport = VisDock.getViewport();
var Nodes = [];
var force = d3.layout.force()
    .size([width, height])
    .on("tick", tick);

var svg = viewport;

var link = svg.selectAll(".link"),
    node = svg.selectAll(".node");

d3.json("readme.json", function(json) {
  VisDock.startChrome();
  root = json;
  Nodes = flatten(json)
  update();
  VisDock.finishChrome();
});

function update() {
  VisDock.startChrome();
  var nodes = flatten(root),
      links = d3.layout.tree().links(nodes);

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

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

// Exit any old links.
  link.exit().remove();

// Enter any new links.
  link.enter().insert("line", ".node")
      .attr("class", "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; });

// Update the nodes…
  node = node.data(nodes, function(d) { return d.id; }).style("fill", color);

// Exit any old nodes.
  node.exit().remove();

// Enter any new nodes.
  node.enter().append("circle")
      .attr("class", "node")
      .attr("cx", function(d) { return d.x; })
      .attr("cy", function(d) { return d.y; })
      .attr("r", function(d) { return Math.sqrt(d.size) / 10 || 4.5; })
      .style("fill", color)
      .on("click", click)
      .call(force.drag);
  VisDock.finishChrome();
}

node.attr("cx", function(d) { return d.x; })
      .attr("cy", function(d) { return d.y; });

for (var i = 0; i < d3.selectAll(".VisDockEllipseLayer")[0].length; i++){
  	var circle = d3.selectAll(".VisDockEllipseLayer")[0][i];
  	var id = circle.getAttributeNS(null, "id").split("_")[1]
  	var cx = Nodes[parseInt(id)].x;
    	var cy = Nodes[parseInt(id)].y;
   	if (Nodes[parseInt(id)] == flatten(root)[parseInt(id)]){
   		circle.setAttributeNS(null, "display", "inline")
   		circle.setAttributeNS(null, "cx", cx)
   		circle.setAttributeNS(null, "cy", cy)
   		circle.setAttributeNS(null, "pointer-events", "none")
   	} else {
   		circle.setAttributeNS(null, "display", "none")
   	}
  }
  AnnotatedByData.update();
  VisDock.finishChrome();    
}

// Color leaf nodes orange, and packages white or blue.
function color(d) {
  return d._children ? "#3182bd" : d.children ? "#c6dbef" : "#fd8d3c";
}

// Toggle children on click.
function click(d) {
  if (!d3.event.defaultPrevented) {
    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 = [], 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;
}

VisDock.eventHandler = {
	getHitsPolygon : function(points, inclusive) {
		var shapebound = new createPolygon(points);
		return shapebound.intersectEllipse(d3.selectAll(".node")[0], inclusive)
	},
	getHitsLine : function(points, inclusive) {
		var shapebound = new createLine(points);
		return shapebound.intersectEllipse(d3.selectAll(".node")[0], inclusive)
	},
	getHitsEllipse : function(points, inclusive) {
		var shapebound = new createEllipse(points);
		return shapebound.intersectEllipse(d3.selectAll(".node")[0], inclusive)
	},
	setColor : function(hits) {
		var circleObjects = d3.selectAll("circle")[0];
		for (var i = 0; i < hits.length; i++) {
			VisDock.utils.addEllipseLayer(hits[i], "fill: " + VisDock.color[num-1] + "; stroke: black;"
				+ "opacity: 0.5;", num - 1);
			QueryManager.layers[num - 1][i][0][0].setAttributeNS(null, "id", "_" + hits[i].__data__.index);	
		}
	},
	changeColor : function(color, query, index) {
		VisDock.utils.changeQueryColor(index, color)
		var visibility = VisDock.utils.getQueryVisibility(index);
		for (var i = 0; i < query.length; i++) {
			query[i].attr("style", "opacity: " + visibility + "; fill: " + color)
		}
	},
	changeVisibility : function(vis, query, index) {
		var color = VisDock.utils.getQueryColor(index);
		for (var i = 0; i < query.length; i++) {
			query[i].attr("style", "opacity: " + vis + "; fill: " + color)
		}
	},
	removeColor : function(hits, index) {
		for (var i = 0; i < hits.length; i++) {
			hits[i].remove();
		}
	}
}
BirdView.init(viewport, 960, 700)
d3.select(self.frameElement).style("width", "960px")
d3.select(self.frameElement).style("height", "700px")
</script>

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

Modified http://rawgithub.com/VisDockHub/NewVisDock/master/master/visdock.js to a secure url

Modified http://rawgithub.com/VisDockHub/NewVisDock/master/master/2D.js to a secure url

Modified http://rawgithub.com/VisDockHub/NewVisDock/master/master/IntersectionUtilities.js to a secure url

Modified http://rawgithub.com/VisDockHub/NewVisDock/master/master/visdock.utils.js to a secure url

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

https://rawgithub.com/VisDockHub/NewVisDock/master/master/visdock.js

https://rawgithub.com/VisDockHub/NewVisDock/master/master/2D.js

https://rawgithub.com/VisDockHub/NewVisDock/master/master/IntersectionUtilities.js

https://rawgithub.com/VisDockHub/NewVisDock/master/master/visdock.utils.js