Force Network Graph Selection

by Tim Williams

HTML

<select id = "opts">
  <option value="A" selected="selected">Set A</option>
  <option value="B" >Set B</option> 
</select>

JavaScript

// The source Data
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;

//Width and height for SVG area
var svg = d3.select("body").append("svg")
            .attr("width", w)
            .attr("height", h);

  // Double click to 'unfix' the node and have forces start to act on it again.
function dblclick(d) {
    d3.select(this).classed("fixed", d.fixed = false);
    }
    // Set the "fixed" property of the dragged node to TRUE when a dragstart event is initiated,
    //   - removes "forces" from acting on that node and changing its position.
    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();

        var drag = force.drag()
                        .on("dragstart", dragstart);

        //------------- EDGES  -----------------------
        // Edges are defined before nodes because nodes should appear on top of edges
        var edges = svg.selectAll("line")
                       .data(dataset.edges, function(d) {return d.value;})  //Key needed for EXIT.
        //ENTER
        edges.enter()
             .append("line")
            ...