nodesNaN

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
    .link {
      stroke: #2E2E2E;
      stroke-width: 2px;
    }

.node {
      stroke: #fff;
      stroke-width: 2px;
    }
    .textClass {
      stroke: #323232;
      font-family: "Lucida Grande", "Droid Sans", Arial, Helvetica, sans-serif;
      font-weight: normal;
      stroke-width: .5;
      font-size: 14px;
    }
  </style>

</head>
<body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script>
  d3.json("data.json", function (error, graph) {
    if (error) throw error;
    function chart(elementName) {

// look for the node in the d3 layout
      var findNode = function (name) {
        for (var i in nodes) {
          if (nodes[i].name === name) return nodes[i];
        }
      };

var width = 960, // default width
        height = 450, // default height
        color = d3.scale.category10(),
        nodes = graph.nodes,
        force = d3.layout.force()
          .nodes(nodes)
          .links([]),
        vis,
        runOnceFlag = true;

vis = d3.select(elementName)
        .append("svg:svg")
        .attr("width", width)
        .attr("height", height)
        .attr("id", "svg")
        .attr("pointer-events", "all")
        .attr("viewBox", "0 0 " + width + " " + height)
        .attr("perserveAspectRatio", "xMinYMid")
        .append('svg:g');

var update = function () {
        var link = vis.selectAll("line")
          .data(force.links(), function (d) {
            return d.source + "-" + d.target;
          });

link.enter().insert("line", "g")
          .attr("id", function (d) {
            return d.source + "-" + d.target;
          })
          .attr("stroke-width", function (d) {
            return d.value / 10;
          })
          .attr("class", "link")
          .style("stroke", "red")
          .transition().duration(5000).style("stroke", "black");
        link.append("title")
          .text(function (d) {
            return d.value;
          });
        link.exit().remove();

var node = vis.selectAll("g.node")
          .data(nodes, function (d) {
            return d.name;
          });

var nodeEnter = node.enter().append("g")
          .attr("class", "node")
          .call(force.drag);

nodeEnter.append("svg:circle")
          .attr("r", 12)
          .attr("id", function (d) {
            return "Node;" + d.name;
          })
          .attr("class", "nodeStrokeClass")
          .attr("fill", function (d) {
            return color(d.group);
          });

nodeEnter.append("svg:text")
          .attr("class", "textClass")
          .attr("x", 14)
          .attr("y", ".31em")
          .text(function (d) {
            return d.name;
          });

node.exit().remove();

force.on("tick", function () {

link.attr("x1", function (d) {
            return d.source.x;
          })
            .attr("y1", function (d) {
              return d.source.y;
            })
            .attr("x2", function (d) {
              return d.target.x;
            })
            .attr("y2", function (d) {
              return d.target.y;
            });

node.attr("transform", function (d) {
            console.log(d);
            return "translate(" + d.x + "," + d.y + ")";
          });

});

// Restart the force layout.
        force
          .charge(-120)
          .linkDistance(function (d) {
            return d.value * 100
          })
          .size([width, height])
          .start();
      };

update();
      var c = {"source": findNode('a'), "target": findNode('b'), value: 1}
      window.setTimeout(function() {
        force.links().push(c);
        update()
      },2000)
    };
    //
    chart('body');
  });
</script>
</body>
</html>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js