Force Network Graph Selection
HTML
<select id = "opts">
<option value="A" selected="selected">Set A</option>
<option value="B" >Set B</option>
</select>
JavaScript
var A =
{
"nodes": [
{ "id": 0,"name": "One", "x": 125,"y": 150, "fixed": "false"},
{ "id": 1, "name": "Two","x": 215, "y": 25, "fixed": "false"},
{ "id": 2, "name": "Three","x": 325, "y": 100, "fixed": "false"}
],
"edges":[
{"source":0,"target":1,"value":"edge-A-One"},
{"source":1,"target":2,"value":"edge-A-Two"}
]}
var B =
{
"nodes": [
{ "id": 0,"name": "One", "x": 200,"y": 40, "fixed": "true"},
{ "id": 1, "name": "Two","x": 115, "y": 125, "fixed": "true"}
],
"edges":[
{"source":0,"target":1,"value":"Edge-B-One"}
]}
var w = 1200;
var h = 1000;
var svg;
function dblclick(d) {
d3.select(this).classed("fixed", d.fixed = false);
}
function dragstart(d) {
d3.select(this).classed("fixed", d.fixed = true);
}
function drawFN (dataset) {
var force = d3.layout.force()
.nodes(dataset.nodes)
.links(dataset.edges)
.gravity(.05)
.charge(-180)
.linkDistance(200)
.size([w, h])
.start();
svg = d3.select("body").append("svg")
.attr("width", w)
.attr("height", h);
var drag = force.drag()
.on("dragstart", dragstart);
var edges = svg.selectAll("line")
.data(dataset.edges, function(d) {return d.value;})
edges.enter()
.append("line")
.attr("stroke", "#808080")
.attr("stroke-width", 2)
.attr("marker-end", "url(#end)");
var nodes = svg.selectAll("g.node")
.data(dataset.nodes, function(d) {return d.name;})
nodes.enter()
.append("g");
nodes.attr("class", "node")
.on("dblclick", dblclick)
.call(drag);
nodes.append("circle")
.attr("r", 6)
...