title: d3.js adding a triangles on lines in force-directed graph
body: <p>I have force directed graph id d3.js which I'm using just for fun. Currently it looks like this: <a href="http://jsfiddle.net/dzorz/WNSTf/" rel="nofollow">http://jsfiddle.net/dzorz/WNSTf/</a></p>
  
  <p>I wanna add little triangles on those two black lines, so they would look like arrows. I've tried to add triangle with path, but I don't know how to append it to lines..</p>
  
  <p>script:</p>
  
  <pre><code>var data = {"nodes":[
          {"name":"Action 4", "type":5, "slug": "", "value":265000},
          {"name":"Action 5", "type":6, "slug": "", "value":23000},
          {"name":"Action 3", "type":4, "slug": "", "value":115000},
          {"name":"Iron Man", "type":1, "slug": "Iron_Man",
              "img_href": "http://www.1sticondesign.com/core/free/Ironman-128.png"},
          {"name":"Superman", "type":1, "slug": "Superman",
              "img_href":"http://www.desktop-icon.com/stock-icons/desktop-boss/superman-icon.gif"},
          {"name":"Action 1", "type":2, "slug": "",},
          {"name":"Action 2", "type":3, "slug": "",},
          {"name":"Batman", "type":1, "slug": "Batman", "img_href": "http://icons.iconarchive.com/icons/iconshock/batman/256/Batman-icon.png"}
                      ], 
              "links":[
          {"source":0,"target":3,"value":10},
          {"source":4,"target":3,"value":1},
          {"source":1,"target":7,"value":10},
          {"source":2,"target":4,"value":10},
          {"source":4,"target":7,"value":1},
          {"source":4,"target":5,"value":10},
          {"source":4,"target":6,"value":10}
                      ]
     }     
  
  var w = 560,
      h = 500,
  radius = d3.scale.log()
      .domain([0, 312000])
      .range(["10", "50"]);
  
  var vis = d3.select("body")
      .append("svg:svg")
      .attr("width", w)
      .attr("height", h);
  
  //d3.json(data, function(json) {
      var force = self.force = d3.layout.force()
          .nodes(data.nodes)
          .links(data.links)
          .distance(100)
          .charge(-1000)
          .size([w, h])
          .start();
  
      var link = vis.selectAll("line.link")
          .data(data.links)
          .enter().append("svg:line")
          .attr("class", function (d) { return "link" + d.value +""; })
          .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; });
  
  
      function openLink() {
      return function(d) {
          var url = "";
          if(d.type == 1) {
              url = "wiki/" + d.slug
          } //else if(d.type == 2) {
              //url = "clients/" + d.slug
          //} else if(d.type == 3) {
              //url = "agencies/" + d.slug
          //}
          window.open("https://en.wikipedia.org/"+url)
      }
  }
  
  
      var node = vis.selectAll("g.node")
          .data(data.nodes)
        .enter().append("svg:g")
          .attr("class", "node")
          .call(force.drag);
  
      node.append("circle")
        .attr("class", function(d){ return "node type"+d.type})
          .attr("r", function(d) { return radius(d.value) || 10 })
        //.style("fill", function(d) { return fill(d.type); })
        .call(force.drag);
  
      node.append("svg:image")
          .attr("class", "circle")
          .attr("xlink:href", function(d){ return d.img_href})
          .attr("x", "-16px")
          .attr("y", "-16px")
          .attr("width", "32px")
          .attr("height", "32px")
          .on("click", openLink());
  
      node.append("svg:text")
          .attr("class", "nodetext")
          .attr("dx", 16)
          .attr("dy", ".35em")
          .text(function(d) { return d.name });
  
      force.on("tick", function() {
        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; });
  
        node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
      });
  //});
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>.link10 { stroke: #ccc; stroke-width: 3px; stroke-dasharray: 3, 3; }
  .link1 { stroke: #000; stroke-width: 3px;}
  .nodetext { pointer-events: none; font: 10px sans-serif; }
  
  .node.type1 {
    fill:brown;
  }
  .node.type2 {
    fill:#337147;
  }
  .node.type3 {
    fill:blue;
  }
  .node.type4 {
    fill:red;
  }
  
  .node.type5 {
      fill:#1BC9E0;
  }
  
  .node.type6 {
      fill:#E01B98;
  }
  
  image.circle {
      cursor:pointer;
  }
  </code></pre>
  
  <p>Could you possibly show me in my jsfiddle?</p>