[D3] Force + Drag + Zoom

by fekkyDev s

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,
            "x": 90,
            "y": 50,
            "fixed": true
        }, {
            "name": "2",
            "rating": 80,
            "id": 654654,
            "x": 50,
            "y": 50,
            "fixed": true
        }, {
            "name": "3",
            "rating": 80,
            "id": 6546544,
            "x": 50,
            "y": 90,
            "fixed": true
        },

    ],
    "links": [{
            "source": 1,
            "target": 0,
            "value": 6,
            "label": "publishedOn"
        }, {
            "source": 1,
            "target": 2,
            "value": 6,
            "label": "publishedOn"
        }, {
            "source": 1,
            "target": 0,
            "value": 4,
            "label": "containsKeyword"
        },

    ]
}


var margin = {
    top: -5,
    right: -5,
    bottom: -5,
    left: -5
};
var width = 500 - margin.left - margin.right,
    height = 400 - margin.top - margin.bottom;

var color = d3.scale.category20();

var force = d3.layout.force()
    .charge(-200)
    .linkDistance(50)
    .size([width + margin.left + margin.right, height + margin.top + margin.bottom]);

var zoom = d3.behavior.zoom()
    .scaleExtent([1, 10])
    .on("zoom", zoomed);

var drag = d3.behavior.drag()
    .origin(function(d) {
        return d;
    })
    .on("dragstart", dragstarted)
    .on("drag", dragged)
    .on("dragend", dragended);


var svg = d3.select("#map").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.right + ")")
    .call(zoom);

var rect = svg.append("rect")
    .attr("width", width)
    .attr("height", height)
    .style("fill", "none")
    .style("pointer-events", "all");

var container =...