D3.js tree with "drag near" logic

Use a larger transparent shape as an alternative to intersection or collision detection when dragging a node. Sparked by this StackOverflow question

<!DOCTYPE html>
<meta charset="utf-8">
<html>
  <head>
    <title>Simple Tree Demo</title>
    <script src="https://d3js.org/d3.v3.min.js"></script>
    <style>
    .nodelink {
      fill: none;
      stroke: #ccc;
      stroke-width: 4.5px;
    }
    .templink {
      fill: none;
      stroke: red;
      stroke-width: 3px;
    }
    </style>
</head>
<body>
  Drag the lonely circle near the others
  <div id="viz"></div>
  <script type="text/javascript">
      var treeData = {"name" : "A", "children" : [ {"name" : "A1" },  {"name" : "A2" }, {"name" : "A3" } ] };
      var selectedNode = null;
      var draggingNode = null;

// ------------- moving -------------------------------  
      var overCircle = function(d) {
        selectedNode = d;
        updateTempConnector();
      }
      var outCircle = function(d) {
        selectedNode = null;
        updateTempConnector();
      }

link.enter().append("path")
          .attr("class", "templink")
          .attr("d", d3.svg.diagonal() )
          .attr('pointer-events', 'none');

link.attr("d", d3.svg.diagonal() )

link.exit().remove();
      }

// ------------- normal tree drawing code --------  
      var vis = d3.select("#viz").append("svg").attr("width", 400).attr("height", 300).append("svg:g").attr("transform", "translate(50, 0)")
      var tree = d3.layout.tree().size([200,200]);
      var nodes = tree.nodes(treeData);
      var links = tree.links(nodes);
  
      var diagonalHorizontal = d3.svg.diagonal().projection( function(d) { return [d.y, d.x]; } );
      var link = vis.selectAll(".nodelink")
        .data(links)
        .enter().append("path")
        .attr("class", "nodelink")
        .attr("d", diagonalHorizontal)
        .attr('pointer-events', 'none');
 
      var node = vis.selectAll("g.node")
        .data(nodes)
        .enter().append("g")
        .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; })
 
      node.append("circle")
        .attr("r", 5)
        .attr('pointer-events', 'none');

// ------------- trickery to avoid collision detection

// phantom node to give us mouseover in a radius around it
      node.append("circle")
        .attr("r", 60)
        .attr("opacity", 0.0) // change this to non-zero to see the target area
        .attr('pointer-events', 'mouseover')
        .on("mouseover", overCircle)
        .on("mouseout", outCircle)

// a new, unconnected node that can be dragged near others to connect it
      newNodes = [ {x:300,y:5, name: 'new'} ];
      vis.selectAll(".lonely")
        .data(newNodes).enter().append("circle")
          .attr("r", 5)
          .attr("class", "lonely")
          .attr("cx", function(d) { return d.x; })
          .attr("cy", function(d) { return d.y; })
          .call(circleDragger)

</script>
  </body>
</html>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js