Four Nodes

Four nodes in a force network

CSS

#nodegroup1{
    fill:#000000;
    fon-family: Serif, Georgia;
    font-size: 14px;   
     font-weight: bold;
  }              
  .nodetext{
     font-size:8;
     color: red;
  }
  .edges{
    stroke: #ccc;
    stroke-width: 2;
   }

JavaScript

//Width and height for SVG area
  var w = 1000;
  var h = 600;
  var svg = d3.select("body").append("svg")
              .attr("width", w)
              .attr("height", h);
  svg.append("text")
     .text("Four Nodes, one fixed. CtrlClick B to go to external link")
     .attr("x",10)
     .attr("y",15);

  var colors = d3.scale.category10()
                 .range(["#FFFF00",  //YELLOW
                         "#377eb8",  //BLUE
                         "#4daf4a",  //GREEN
                         "#e41a1c",  //RED
                         ]);  
  var dataset = {
    "nodes":[
      {"id":0,"name":"A","group":"1", "x":16, "y":10, "fixed":"TRUE"},
      {"id":1,"name":"B","group":"2", "url":"http://www.google.com"},
      {"id":2,"name":"C","group":"3"},
      {"id":3,"name":"D","group":"4"}
      ],
    "edges":[
      {"source":0,"target":1,"value":""},
      {"source":1,"target":2,"value":""},
      {"source":2,"target":3,"value":""},
      {"source":3,"target":0,"value":""}
      ]
   }
  var force = d3.layout.force()
                .nodes(dataset.nodes)
                .links(dataset.edges)
                .gravity(.05)
                .charge(-180)
                .linkDistance(100)
                .size([w, h])
                .start();
  var drag = force.drag()
                  .on("dragstart", dragstart);
  var edges = svg.selectAll("line")
                 .data(dataset.edges)
                 .enter()
                 .append("line")
                 .attr("id",function(d,i){return 'edge'+i})
                 .attr("class", "edges")
                 .attr("marker-end", "url(#end)");  
  var nodes = svg.selectAll("g.node")
                 .data(dataset.nodes)
                 .enter()
                 .append("g")
                 .attr("class", "node")
                 .on("dblclick", dblclick)
                 .on("click", function (d) {
                     if (d3.event.ctrlKey) {
                     location.href = d.url;
                     }
 ...