D3, SVG, and force graph

A graph example

by b_long

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<!-- 
Forked / based on https://jsfiddle.net/yaprak/422mjtu6/1/ 
-->
<div id="graph" style="width: 600px;height: 390px;padding:0px;border: 1px solid gray">
</div>
<div id="svg-canvas">Original container</div>

CSS

/* CSS from our application */
.node {
    stroke: #222;
    stroke-width: 1.5px;
    fill:#3588cd;
}
.link {
    stroke: #999;
    stroke-opacity: .6;
    stroke-width: 1px;
}
/* CSS from the upstream fiddle */
.inter-path {
  z-index: 1000;
}

.my-node {
  z-index: 500;
}

.line {
  fill: none;
  stroke: steelblue;
  stroke-width: 1.5px;
}

JavaScript

x_0 = 50;
y_0 = 50;
x_1 = 200;
y_1 = 200

function upstreamD3ExampleGraph() {
  var lineData = [{
    "x": 50,
    "y": 50
  }, {
    "x": 100,
    "y": 100
  }, {
    "x": 150,
    "y": 150
  }, {
    "x": 200,
    "y": 200
  }];
  //This is the accessor function we talked about above
  var lineFunction = d3.svg.line()
    .x(function(d) {
      return d.x;
    })
    .y(function(d) {
      return d.y;
    })
    .interpolate("basis");

  //The SVG Container
  var svgContainer = d3.select("#svg-canvas").append("svg").attr("width", 400).attr("height", 400);

  //The line SVG Path we draw
  lineEnter = svgContainer.append("g")
  var myLine = lineEnter.append("path")
    .attr("d", lineFunction(lineData))
    .attr("stroke", "blue")
    .attr("stroke-width", 2)
    .attr("fill", "none");

  lineEnter.append("text").text("Graph title")
    .attr("y", function(d) {
      console.log(d);
      console.log("MyLine");
      console.log(myLine.attr("d"))
      return 10;
    });

  var nodes = svgContainer.selectAll(".my-node")
  nodes.data(lineData)
    .enter()
    .append("circle")
    .attr("class", ".my-node")
    .attr("r", 5)
    .attr("cx", function(d) {
      return d.x;
    })
    .attr("cy", function(d) {
      return d.y;
    });
}

// Note: When declaring mock data, you MUST not have 'links' which
// reference a non-existent node.  For example, here we have 5 nodes
// meaning that we can access nodes[0] through nodes[4], since 
// the array is zero-indexed.  If you attempt to access nodes[5], an
// error will be thrown like:
//
//	TypeError: Cannot read property 'weight' of undefined
// 
//  I've seen this error, and also it is described by a StackOverflow
//	member:
//		https://stackoverflow.com/a/22428106
var mock_data = {
  "nodes": [{
      "title": "creation",
      "label": "Collection",
      "data": {
        "name": "creation",
        "wikipedia_url": "https://en.wikipedia.org/wiki/JavaScript",
        "Type": "EVENT"
      }
    },
    {
     ...