<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>d3 force sample</title>
  <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
  <style>
    #content {
      border: solid 1px orange;
    }
  </style>
</head>
<body>
<svg id="content" width="300" height="300"></svg>
</body>
</html>
#content {
  border: solid 1px orange;
}

data_set = [
  {name:"aaa", level:1},
  {name:"bbb", level:2},
  {name:"ccc", level:2},
  {name:"ddd", level:2},
  {name:"eee", level:3},
  {name:"fff", level:3},
  {name:"ggg", level:3},
  {name:"hhh", level:3},
  {name:"iii", level:3},
  {name:"jjj", level:3},
  {name:"kkk", level:4},
  {name:"lll", level:4}
];
link_set = [
  {source:"aaa", target:"bbb"},
  {source:"aaa", target:"ccc"},
  {source:"aaa", target:"ddd"},
  {source:"ddd", target:"eee"},
  {source:"bbb", target:"eee"},
  {source:"ccc", target:"fff"},
  {source:"ddd", target:"ggg"},
  {source:"bbb", target:"hhh"},
  {source:"ddd", target:"iii"},
  {source:"ddd", target:"jjj"},
  {source:"eee", target:"kkk"},
  {source:"jjj", target:"lll"},
];
var width=300, height=300;

 
var force_g = d3.select("#content").append("g") ;

var links =  force_g.selectAll(".link")
  .data(link_set)
  .enter()
  .append("line")
  .attr("class", "link")
  .attr("stroke", "#000")
  .attr("stroke-weight", 1)
  ;

var circles =  force_g.selectAll("circle")
  .data(data_set)
  .enter()
  .append("circle")
  .attr("class","test-circle")
  .attr("r", 5)
  .attr("fill","lightblue")
  .call(d3.drag()
    .on("start", dragstarted)
    .on("drag", dragged)
    .on("end", dragended)
  )
  .on("click", function(d){ alert(d.level + " " + d.name)})
  ;

var line_force = d3.forceSimulation()
  .nodes(data_set)
  .on("tick", ticked)
  .force("link", d3.forceLink(link_set)
    .id(function(d){ return d.name ; })
    .distance(20) )
  .force("center", d3.forceY(height/2))
  .force('charge', d3.forceManyBody().strength(-10))
  .force("collision", d3.forceCollide(15))
  .velocityDecay(0.5)
  ; 

for (var i = 0; i < data_set.length; i++) {
  line_force.nodes()[i].fx = 20 + data_set[i].level * 50;
}

function dragstarted(d) {
  if (!d3.event.active) line_force.alphaTarget(0.9).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) line_force.alphaTarget(0);
  // d.fx = null;
  d.fy = null;
}

function ticked(){
  circles
  .attr("cx", function(d){ return d.x; })
  .attr("cy", function(d){ return d.y; }) ;

  links
  .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; });
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.