D3NodeArrows

Basic force directed layout with directional arrows

HTML

<script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
<script type="application/json" id="mis">
  { "nodes": [{ "name": "Myriel", "group": 1 }, { "name": "Napoleon", "group": 1 }, { "name": "Mlle.Baptistine", "group": 1 }, { "name": "Mme.Magloire", "group": 1 }, { "name": "CountessdeLo", "group": 1 }, { "name": "Geborand", "group": 1 }, { "name":
  "Champtercier", "group": 1 }, { "name": "Cravatte", "group": 1 }, { "name": "Count", "group": 1 }, { "name": "OldMan", "group": 1 }, { "name": "Labarre", "group": 2 }, { "name": "Valjean", "group": 2 }, { "name": "Marguerite", "group": 3 }, { "name":
  "Mme.deR", "group": 2 }, { "name": "Isabeau", "group": 2 }, { "name": "Gervais", "group": 2 }, { "name": "Tholomyes", "group": 3 }, { "name": "Listolier", "group": 3 }, { "name": "Fameuil", "group": 3 }, { "name": "Blacheville", "group": 3 }, { "name":
  "Favourite", "group": 3 }, { "name": "Dahlia", "group": 3 }, { "name": "Zephine", "group": 3 }, { "name": "Fantine", "group": 3 }, { "name": "Mme.Thenardier", "group": 4 }, { "name": "Thenardier", "group": 4 }, { "name": "Cosette", "group": 5 }, { "name":
  "Javert", "group": 4 }, { "name": "Fauchelevent", "group": 0 }, { "name": "Bamatabois", "group": 2 }, { "name": "Perpetue", "group": 3 }, { "name": "Simplice", "group": 2 }, { "name": "Scaufflaire", "group": 2 }, { "name": "Woman1", "group": 2 }, {
  "name": "Judge", "group": 2 }, { "name": "Champmathieu", "group": 2 }, { "name": "Brevet", "group": 2 }, { "name": "Chenildieu", "group": 2 }, { "name": "Cochepaille", "group": 2 }, { "name": "Pontmercy", "group": 4 }, { "name": "Boulatruelle", "group":
  6 }, { "name": "Eponine", "group": 4 }, { "name": "Anzelma", "group": 4 }, { "name": "Woman2", "group": 5 }, { "name": "MotherInnocent", "group": 0 }, { "name": "Gribier", "group": 0 }, { "name": "Jondrette", "group": 7 }, { "name": "Mme.Burgon", "group":
  7 }, { "name": "Gavroche", "group": 8 }, { "name": "Gillenormand", "group": 5 }, {...

CSS

.node {
  stroke: #fff;
  stroke-width: 1.5px;
}

.link {
  stroke: #999;
  stroke-opacity: .6;
}

JavaScript

//Constants for the SVG
var width = 500,
  height = 500;

//Set up the colour scale
var color = d3.scale.category20();

//Set up the force layout
var force = d3.layout.force()
  .charge(-120)
  .linkDistance(80)
  .size([width, height]);

var zoom = d3.behavior.zoom()
  .scaleExtent([1, 10])
  .on("zoom", zoomed);

//Append a SVG to the body of the html page. Assign this SVG as an object to svg
var svg = d3.select('body').append("svg")
  .attr("width", width)
  .attr("height", height)
  .call(zoom)
  .append('svg:g');


//Read the data from the mis element 
var mis = document.getElementById('mis').innerHTML;
graph = JSON.parse(mis);

force.drag().on("dragstart", function() { d3.event.sourceEvent.stopPropagation(); });

//Creates the graph data structure out of the json data
force.nodes(graph.nodes)
  .links(graph.links)
  .start();
  

//Create all the line svgs but without locations yet
var link = svg.selectAll(".link")
  .data(graph.links)
  .enter().append("line")
  .attr("class", "link")
  .style("marker-end", "url(#suit)") //Added 
;

//Do the same with the circles for the nodes - no 
var node = svg.selectAll(".node")
  .data(graph.nodes)
  .enter().append("circle")
  .attr("class", "node")
  .attr("r", 8)
  .style("fill", function(d) {
    return color(d.group);
  })
  .call(force.drag);

function zoomed() {
  svg.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
}

function dragstarted(d) {
  d3.event.sourceEvent.stopPropagation();

  d3.select(this).classed("dragging", true);
  force.start();
}

function dragged(d) {

  d3.select(this).attr("cx", d.x = d3.event.x).attr("cy", d.y = d3.event.y);

}

function dragended(d) {

  d3.select(this).classed("dragging", false);
}

//Now we are giving the SVGs co-ordinates - the force layout is generating the co-ordinates which this code is using to update the attributes of the SVG elements
force.on("tick", function() {
  link.attr("x1", function(d) {
      return d.source.x;
  ...