D3 Examples - Molecule

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style>
​
.link line {
  stroke: #696969;
}
​
.link line.separator {
  stroke: #fff;
  stroke-width: 2px;
}
​
.node circle {
  stroke: #000;
  stroke-width: 1.5px;
}
​
.node text {
  font: 10px sans-serif;
  pointer-events: none;
}
  
.cursor {
  fill: none;
  stroke: brown;
  pointer-events: none;
}
​
</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>
​
var width = 960,
    height = 500;
​
var color = d3.scale.category20();
​
var radius = d3.scale.sqrt()
    .range([0, 6]);
​
var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
    .on("mousemove", mousemove)
    .on("mousedown", mousedownCanvas);
​
var force = d3.layout.force()
    .size([width, height])
    .charge(-400)
    .linkDistance(function(d) { return radius(d.source.size) + radius(d.target.size) + 20; });
  
 var nodes,
    links,
    node,
    link;
 var cursor;
  
d3.json("graph.json", function(error, graph) {
  if (error) throw error;
​
  force
      .nodes(graph.nodes)
      .links(graph.links)
      .on("tick", tick);
  
   nodes = force.nodes();
    links = force.links();
    node = svg.selectAll(".node");
    link = svg.selectAll(".link");
  
  cursor = svg.append("circle")
    .attr("r", 30)
    .attr("transform", "translate(-100,-100)")
    .attr("class", "cursor");
  
  restart();
});
  
function mousemove() {
  cursor.attr("transform", "translate(" + d3.mouse(this) + ")");
}
  
function mousedownCanvas() {
  var newNodeId = Math.max.apply(Math, nodes.map(function(o) { return o.id; })) + 1;
  var point = d3.mouse(this),
      node = {atom: "C", size: 12, x: point[0], y: point[1], id: newNodeId},
      n = nodes.push(node);
​
  // add links to any nearby nodes
  nodes.forEach(function(target) {
    var x = target.x - node.x,
        y = target.y - node.y;
    if (Math.sqrt(x * x + y * y) < (36 + target.size) && node !== target) {
      var newLinkId = Math.max.apply(Math, links.map(function(o) { return o.id; })) + 1;
      links.push({source: node, target: target, bond: 1, id: newLinkId});
    }
  });
​
  restart();
}
​
function mousedownNode(d, i) {
  nodes = nodes.filter(function(e) { return e.id !== d.id; });
  links = links.filter(function(l) {
    return l.source.id !== d.id && l.target.id !== d.id;
  });
  d3.event.stopPropagation();
​
  restart();
}
​
function tick() {
  link.selectAll("line")
        .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 restart() { 
  link = link.data(links, function(d) { return d.id; });
​
  var enterLinks = link.enter().insert("g")
      .attr("class", "link");
  enterLinks.append("line")
      .style("stroke-width", function(d) { return (d.bond * 2 - 1) * 2 + "px"; });
​
  enterLinks.filter(function(d) { return d.bond > 1; }).append("line")
      .attr("class", "separator");
  link.exit()
      .remove();
  
  node = node.data(nodes, function(d) { return d.id; });
​
  var enterNodes = node.enter().insert("g")
      .attr("class", "node");
​
  enterNodes.append("circle")
      .attr("r", function(d) { return radius(d.size); })
      .style("fill", function(d) { return color(d.atom); })
      .on("mousedown", mousedownNode);
​
  enterNodes.append("text")
      .attr("dy", ".35em")
      .attr("text-anchor", "middle")
      .text(function(d) { return d.atom; });
  
  node.exit()
      .remove(); 
force
      .nodes(nodes)
      .links(links)
      .start();
}
  
  
</script>
​
    