D3.js Drag and Drop Collapsible Tree with Node Editing

The D3.js collapsible tree with editing nodes functionality.

Nodes can be renamed, added or deleted.

Popup menu script D3 Context Menu copied from http://codepen.io/billdwhite/pen/VYGwaZ

forked from robschmuecker's block: D3.js Drag and Drop, Zoomable, Panning, Collapsible Tree with auto-sizing.

forked from mattsrinc's block: D3.js Drag and Drop Collapsible Tree with Node Editing

forked from anonymous's block: D3.js Drag and Drop Collapsible Tree with Node Editing

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style type="text/css">
  
    .node {
    cursor: pointer;
  }
​
  .overlay{
      background-color:#EEE;
  }
   
  .node circle {
    fill: #fff;
    stroke: steelblue;
    stroke-width: 1.5px;
  }
   
  .node text {
    font-size:10px; 
    font-family:sans-serif;
  }
   
  .link {
    fill: none;
    stroke: #ccc;
    stroke-width: 1.5px;
  }
​
  .templink {
    fill: none;
    stroke: red;
    stroke-width: 3px;
  }
​
  .ghostCircle.show{
      display:block;
  }
​
  .ghostCircle, .activeDrag .ghostCircle{
       display: none;
  }
​
</style>
<link rel="stylesheet" type="text/css" href="d3-context-menu.css"></style>
<script src="https://underscorejs.org/underscore-min.js"></script>
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="d3-context-menu.js"></script>
<body>
    <div id="tree-container"></div>
<script src="dndTree.js"></script>
</body>
</html>
    

Modified http://underscorejs.org/underscore-min.js to a secure url

Modified http://code.jquery.com/jquery-1.10.2.min.js to a secure url

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

https://underscorejs.org/underscore-min.js

https://code.jquery.com/jquery-1.10.2.min.js

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