[D3] Force + Drag + Zoom

by ramnathv

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="//rawgit.com/Caged/d3-tip/master/index.js"></script>
<link rel="stylesheet" href="//rawgit.com/Caged/d3-tip/master/examples/example-styles.css">
<div class="main">
   <div id="map">
       <div class="buttons">
          <button class='btn btn-default' data-zoom="+1">+</button>
          <button class='btn btn-default'  data-zoom="-1">-</button>
       </div>
   </div>
</div>

CSS

.container{
  margin-top: 20px;
}
.main{
  margin: 30px;
}
.node {
  stroke-width: 1.5px;

.node-active{
}
  stroke: #555;
  stroke-width: 1.5px;
}

.link {
  stroke: #555;
  stroke-opacity: .5;
}

.link-active {
  stroke-opacity: 1;
  stroke-width: 2px !important;
}

.overlay {
  fill: none;
  pointer-events: all;
}

#map{
    /*border: 2px #555 dashed;*/
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
}

JavaScript

var graph = {
	"nodes":[
		{"name":"1","rating":90,"id":2951},
		{"name":"2","rating":80,"id":654654},
		{"name":"3","rating":80,"id":6546544},
		{"name":"4","rating":1,"id":68987978},
		{"name":"5","rating":1,"id":9878933},
		{"name":"6","rating":1,"id":6161},
		{"name":"7","rating":1,"id":64654},
		{"name":"8","rating":20,"id":354654},
		{"name":"9","rating":50,"id":8494},		
		{"name":"10","rating":1,"id":6846874},
		{"name":"11","rating":1,"id":5487},
		{"name":"12","rating":80,"id":"parfum_kenzo"},
		{"name":"13","rating":1,"id":65465465},
		{"name":"14","rating":90,"id":"jungle_de_kenzo"},
		{"name":"15","rating":20,"id":313514},
		{"name":"16","rating":40,"id":36543614},
		{"name":"17","rating":100,"id":"Yann_YA645"},
		{"name":"18","rating":1,"id":97413},
		{"name":"19","rating":1,"id":97414},
		{"name":"20","rating":100,"id":976431231},
		{"name":"21","rating":1,"id":9416},
		{"name":"22","rating":1,"id":998949},
		{"name":"23","rating":100,"id":984941},
		{"name":"24","rating":100,"id":"99843"},
		{"name":"25","rating":1,"id":94915},
		{"name":"26","rating":1,"id":913134},
		{"name":"27","rating":1,"id":9134371}
	],
	"links":[
		{"source":6,"target":5,"value":6, "label":"publishedOn"},
		{"source":8,"target":5,"value":6, "label":"publishedOn"},
		{"source":7,"target":1,"value":4, "label":"containsKeyword"},
		{"source":8,"target":10,"value":3, "label":"containsKeyword"},
		{"source":7,"target":14,"value":4, "label":"publishedBy"},
		{"source":8,"target":15,"value":6, "label":"publishedBy"},
		{"source":9,"target":1,"value":6, "label":"depicts"},
		{"source":10,"target":1,"value":6, "label":"depicts"},
		{"source":16,"target":1,"value":6, "label":"manageWebsite"},
		{"source":16,"target":2,"value":5, "label":"manageWebsite"},     
		{"source":16,"target":3,"value":6, "label":"manageWebsite"},
		{"source":16,"target":4,"value":6, "label":"manageWebsite"},
		{"source":19,"target":18,"value":2, "label":"postedOn"},
		{"source":18,"target":1,"value":6,...