[D3] Force + Drag + Zoom

by sunilbg

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<body>
    <div id="map"></div>
</body>

CSS

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

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

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

.link-active {
  stroke-opacity: 1;
}

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

#map{
    border: 2px #555 dashed;
    width:500px;
    height:400px;
}

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,...