d3js箭頭不顯示

Question

我有一個力有向圖的例子。我想顯示箭頭，但不管我嘗試了什麼，我都看不到它們。

這裏是我的javascript

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 + ")"; 
     }); 
    } 

而且here is my jsfiddle

Answer 1

從MDN docu on marker-mid：

標記 - 中定義應在比其他每個頂點繪製箭頭或者多標記給定元素或基本形狀的第一個和最後一個頂點。

所以標記將插入在每個頂點，但開始和結束。

但是，一個簡單的線段沒有其他頂點，但它的開始和結束。因此代碼中沒有顯示標記。

如果您將marker-mid更改爲例如marker-end，您將看到箭頭（儘管現在它們不是那麼漂亮）：fiddle。

另一種方法是將line元素更改爲path元素，並在中間添加一個額外的頂點。但是，這需要更多的代碼。