D3 - FORCED GRAPH - RESET TO ORIGINAL POSITIONS
by bizamajig
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
CSS
.node {
stroke: #fff;
stroke-width: 1.5px;
}
.link {
stroke: #999;
stroke-opacity: .6;
}
JavaScript
var width = 960,
height = 500;
var force = d3.layout.force()
.size([width, height])
.charge(-400)
.linkDistance(40)
.on("tick", tick);
var drag = force.drag()
.on("dragend", dragend)
.on("dragstart", dragstart);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
var link = svg.selectAll(".link"),
node = svg.selectAll(".node");
graph = {
"nodes": [{
"x": 469,
"y": 410
}, {
"x": 493,
"y": 364
}, {
"x": 442,
"y": 365
}, {
"x": 467,
"y": 314
}, {
"x": 477,
"y": 248
}, {
"x": 425,
"y": 207
}, {
"x": 402,
"y": 155
}, {
"x": 369,
"y": 196
}, {
"x": 350,
"y": 148
}, {
"x": 539,
"y": 222
}, {
"x": 594,
"y": 235
}, {
"x": 582,
"y": 185
}, {
"x": 633,
"y": 200
}],
"links": [{
"source": 0,
"target": 1
}, {
"source": 1,
"target": 2
}, {
"source": 2,
"target": 0
}, {
"source": 1,
"target": 3
}, {
"source": 3,
"target": 2
}, {
"source": 3,
"target": 4
}, {
"source": 4,
"target": 5
}, {
"source": 5,
"target": 6
}, {
"source": 5,
"target": 7
}, {
"source": 6,
"target": 7
}, {
"source": 6,
"target": 8
}, {
"source": 7,
"target": 8
}, {
"source": 9,
"target": 4
}, {
"source": 9,
"target": 11
}, {
"source": 9,
"target": 10
}, {
"source": 10,
"target": 11
}, {
"source": 11,
"target": 12
}, {
"source": 12,
"target": 10
}]
};
force.nodes(graph.nodes)
.links(graph.links)
...