D3 Examples - VisDock in Labeled Force Layout

VisDock in Labeled Force Layout
The VisDock toolkit has been integrated into the Labeled Force Layout example built with D3.js (found here) by Mike Bostock. Using selection and other tools, users can query rectangular elements that enclose icons in force directed layout, and explore the plot closely using Pan & Zoom tools. For more information about VisDock, cick on the link.
xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style>
​
.link {
  stroke: #ccc;
}
​
.node text {
  pointer-events: none;
  font: 10px sans-serif;
}
​
</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
​
VisDock.init('body', {width: 1100, height: 700});
AnnotatedByData.layerTypes = ["rect"];
var viewport = VisDock.getViewport();
​
var svg = viewport;   
​
var force = d3.layout.force()
    .gravity(.05)
    .distance(100)
    .charge(-100)
    .size([width, height]);
​
d3.json("graph.json", function(error, json) {
  VisDock.startChrome();    
  force
      .nodes(json.nodes)
      .links(json.links)
      .start();
​
  var link = svg.selectAll(".link")
      .data(json.links)
    .enter().append("line")
      .attr("class", "link");
​
  var node = svg.selectAll(".node")
      .data(json.nodes)
    .enter().append("g")
      .attr("class", "node")
      .call(force.drag);
​
  node.append("rect")
      .attr("class", "enclosure")
      .attr("x", -8)
      .attr("y", -8)
      .attr("width", 16)
      .attr("height", 16)
      .attr("style", "fill: white; opacity: 0.5")
​
  node.append("image")
      .attr("xlink:href", "https://github.com/favicon.ico")
      .attr("x", -8)
      .attr("y", -8)
      .attr("width", 16)
      .attr("height", 16);
​
  node.append("text")
      .attr("dx", 12)
      .attr("dy", ".35em")
      .text(function(d) { return d.name });
​
  force.on("tick", function() {
    VisDock.startChrome();
    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 + ")"; });
    VisDock.updateLayers();
    AnnotatedByData.update();
    VisDock.finishChrome();
  });
  VisDock.finishChrome();
});
​
    VisDock.eventHandler = {
        getHitsPolygon : function(points, inclusive) {
            var shapebound = new createPolygon(points);
            return shapebound.intersectPolygon(d3.selectAll(".enclosure")[0], inclusive)
        },
        getHitsLine : function(points, inclusive) {
            var shapebound = new createLine(points);
            return shapebound.intersectPolygon(d3.selectAll(".enclosure")[0], inclusive)
        },
        getHitsEllipse : function(points, inclusive) {
            var shapebound = new createEllipse(points);
            return shapebound.intersectPolygon(d3.selectAll(".enclosure")[0], inclusive)
        },
        setColor : function(hits) {
            for (var i = 0; i < hits.length; i++) {
                VisDock.utils.addPolygonLayer(hits[i], "fill: " + VisDock.color[num - 1] + "; opacity: 0.5", num - 1)
            }
        },
        changeColor : function(color, query, index) {
            for (var i = 0; i < query.length; i++) {
                var vis = query[i][0][0].getAttributeNS(null, "style").split(";")[1] 
                 "; "+ query[i][0][0].getAttributeNS(null, "style").split(";")[2]
                query[i][0][0].setAttributeNS(null, "style", "fill: " + color + "; " + vis)
            }
        },
        changeVisibility : function(vis, query, index) {
            
            for (var i = 0; i < query.length; i++) {
                var style = query[i][0][0].getAttributeNS(null, "style").split("opacity")[0]
                query[i][0][0].setAttributeNS(null, "style", style + "; opacity: " + vis)
            }
        },
        removeColor : function(hits, index) {
            for (var i = 0; i < hits.length; i++) {
                hits[i].remove();
            }
        },
        QueryClick : function(query, index) {
​
        }
    }
BirdView.init(viewport, 1100, 700)
d3.select(self.frameElement).style("width", "1100px");
d3.select(self.frameElement).style("height", "700px");
</script>
    