title: d3js arrowheads not showing
body: <p>I have an example of force directed graph. And i want to show arrowheads, but no matter what i tried i can't see them.</p>
  
  <p>Here is my javascript</p>
  
  <pre><code>    var nodes = {};
  
      // Compute the distinct nodes from the links.
      links.forEach(function(link) {
          link.source = nodes[link.source] || (nodes[link.source] = {
              name: link.source
          });
          link.target = nodes[link.target] || (nodes[link.target] = {
              name: link.target
          });
      });
  
      var width = 960,
          height = 500;
  
      var force = d3.layout.force()
          .nodes(d3.values(nodes))
          .links(links)
          .size([width, height])
          .linkDistance(100)
          .charge(-300)
          .on("tick", tick)
          .start();
  
      var svg = d3.select("body").append("svg")
          .attr("width", width)
          .attr("height", height);
  
      svg.append("svg:defs").selectAll("marker")
          .data(["arrow"])
          .enter().append("svg:marker")
          .attr("id", "arrow")
          .attr("viewBox","0 0 10 10")
          .attr("refX","20")
          .attr("refY","5")
          .attr("markerUnits","strokeWidth")
          .attr("markerWidth","9")
          .attr("markerHeight","5")
          .attr("orient","auto")
          .append("svg:path")
          .attr("d","M 0 0 L 10 5 L 0 10 z")
          .attr("fill", "#f0f0f0");
  
      var link = svg.append("svg:g").selectAll("line")
          .data(force.links())
          .enter().append("svg:line")
          .attr("class", "link")
          .attr("marker-mid", "url(#arrow)");
  
      var node = svg.append("svg:g").selectAll(".node")
          .data(force.nodes())
          .enter().append("g")
          .attr("class", "node")
          .call(force.drag);
  
      node.append("circle")
          .attr("r", 8);
  
      node.append("text")
          .attr("x", -22)
          .text(function(d) {
          return d.name;
      });
  
      function tick() {
          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;
          });
          link.attr("marker-mid", "url(#arrow)");
  
          node.attr("transform", function(d) {
              return "translate(" + d.x + "," + d.y + ")";
          });
      }
  </code></pre>
  
  <p>And <a href="http://jsfiddle.net/Kobayakawa/eFxFC" rel="nofollow">here is my jsfiddle</a></p>