d3 v4 force

HTML

<script src="https://d3js.org/d3.v4.0.0-rc.2.js"></script>
<svg width="400" height="300"></svg>

CSS

.link {
  stroke: #aaa;
}

.node {
  pointer-events: all;
  stroke: none;
  stroke-width: 40px;
}

JavaScript

var nodes = [
  {"id": 1, "name": "A"},
  {"id": 2, "name": "B"}  
]

var links = [
  {source: 1, target: 2}
]

var index = 10;

var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height"),
    node,
    link;

var simulation = d3.forceSimulation()
    .force("link", d3.forceLink().id(function(d) { return d.id; }))
    .force("charge", d3.forceManyBody())
    .force("center", d3.forceCenter(width / 2, height / 2))
    .on("tick", ticked);

var drag = d3.drag()
    .on("start", dragstarted)
    .on("drag", dragged)
    .on("end", dragended);

update();

function update() {
  link = svg.selectAll(".link")
    .data(links, function(d) { return d.target.id; })

  var linkEnter = link.enter().append("line")
    .attr("class", "link");

  link = linkEnter.merge(link);

  node = svg.selectAll(".node")
    .data(nodes, function(d) { return d.id; })

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

  nodeEnter.append("circle")
      .attr("r", 2.5)

  nodeEnter.append("text")
      .attr("dy", 3)
      .text(function(d) { return d.name; });

  node = nodeEnter.merge(node);

  simulation
      .nodes(nodes);

  simulation.force("link")
      .links(links);
}

function click(d) {

  var t1 = {"id": 1, "name": "A"};
  var t2 = {"id": 2, "name": "B"} ; 
  var l1 = {source: 1, target: 2};

  nodes.push(t1);
  nodes.push(t2);
  links.push(l1);
   update();
}

function ticked() {
  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) { return "translate(" + d.x + ", " + d.y + ")"; });
}

function dragstarted(d) {
  if (!d3.event.active) simulation.alphaTarget(0.3).restart()
}

function dragged(d) {
  d.fx = d3.event.x;
  d.fy = d3.event.y;
}

function dragended(d) {
 ...