D3 Examples - zoomable, draggable force layout with labels

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
​
<link   rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
​
<link rel="stylesheet" href="style.css">
​
<body>
  
 <img src = "https://www.webservices.nl/wp-content/uploads/logo_FRISS_rgb72dpi_port_txt.png">
​
  <div id = "controls"> 
    <div class="row">
      <div class="col-sm-4">
        <button type="button" class="btn btn-success btn-xs" id = "btn1">remove</button>
      </div>
      <div class="col-sm-6">
        <input  type="range" name="points" min="0" max="10" step = ".25" id = "id1">
      </div>
    </div>
  </div>
  <div id = "id2">value</div>
</body> 
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://d3js.org/d3.v4.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Architects+Daughter" rel="stylesheet">
<script>
​
// see also 
// https://jsfiddle.net/JSDavi/qvco2Ljy
// https://bl.ocks.org/mbostock/2675ff61ea5e063ede2b5d63c08020c7
// https://bl.ocks.org/mbostock/950642  
// https://fontawesome.io/cheatsheet/ 
// https://jsfiddle.net/t4vzg650/6/ collapse example  
// https://stackoverflow.com/questions/8986702/d3-js-is-it-possible-to-animate-between-a-force-directed-graph-and-a-node-link
// Lars Kotthoff  
// https://www.airpair.com/javascript/posts/d3-force-layout-internals
// bounded force layout
// https://blockbuilder.org/FrissAnalytics/a7c3f6b1b99eb44563b590694fd6e90e
  
  
// chart dimensions
var width  = 1024, height = 800, radius = 200;
  
// set up svg  
var svg = d3.select("body")
  .append("svg")
  .attr("width", width)
  .attr("height", height)
  .call(d3.zoom().on("zoom", function () {
    svg.attr("transform", d3.event.transform)
  }))
  .append("g");
​
var forceLink = d3.forceLink().id(function(d) { return d.id; });
  
var simulation = d3.forceSimulation()
    .force("link", d3.forceLink().id(function(d) { return d.id; }))
    .force("charge", d3.forceManyBody().strength(-400))
    .force("center", d3.forceCenter(width / 2, height / 2));
​
d3.json("data.json", function(error, graph) {
  
  var link = svg.append("g")
                .style("stroke", "#aaa")
                .selectAll("line")
                .data(graph.links)
                .enter().append("line");
​
  var node = svg.append("g")
            .attr("class", "nodes")
  .selectAll("circle")
            .data(graph.nodes)
  .enter().append("circle")
      .attr("r", function(d){return +d.radius})
      .style("fill", function(d){return d.fill})
      .style("stroke", function(d){return d.stroke})
      .style("stroke-width", "1px")
  .call(d3.drag()
              .on("start", dragstarted)
              .on("drag", dragged)
              .on("end", dragended));
  
  var label = svg.append("g")
      .attr("class", "labels")
      .selectAll("text")
      .data(graph.nodes)
      .enter().append("text")
      .attr('text-anchor', 'middle')
        .attr('dominant-baseline', 'central')
        .style('font-family','FontAwesome')
        .style('font-size','20px')
        .text(function (d) {return d.icon;})
        .call(d3.drag()
                .on("start", dragstarted)
                .on("drag", dragged)
                .on("end", dragended));
​
  simulation
    .nodes(graph.nodes)
    .on("tick", ticked);
​
  simulation.force("link")
    .links(graph.links);
  
  function ticked() {
    
    //update link positions
    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; });
​
    // update node positions    
    // note in this example we bound the positions
    node.attr("cx", function(d) { 
      return d.x = Math.max(radius, Math.min(width - radius, d.x));
    })
      .attr("cy", function(d) { 
      return d.y = Math.max(radius, Math.min(height - radius, d.y)); 
    });
    
    // update label positions
    label
            .attr("x", function(d) { return d.x; })
        .attr("y", function (d) { return d.y; })
        
  }
  
  
  // when the input range changes update the circle 
  d3.select("#id1").on("input", function() {
    var value = +this.value;
    d3.select("#id2").html(value);
  });
​
});
    
$("#btn1").on("click", function(){
  d3.selectAll(".nodes").remove();
})  
​
​
  
function dragstarted(d) {
  if (!d3.event.active) simulation.alphaTarget(0.3).restart()
  d.fx = d.x;
  d.fy = d.y;
}
​
function dragged(d) {
  d.fx = d3.event.x;
  d.fy = d3.event.y;
}
​
function dragended(d) {
    if (!d3.event.active) simulation.alphaTarget(0);
  d.fx = null;
  d.fy = null;
}
​
</script>
    