Представляя Arrow (режиссер), в Force Ориентированный граф d3

Question

Я использую бессиловую ориентированный граф в образце здесь - http://bl.ocks.org/mbostock/4062045

Но поскольку мои данные направлены, мне нужны ссылки на графике должны быть представлены в виде стрелки. Может быть, как в, http://bl.ocks.org/d3noob/5141278.

Может кто-то пожалуйста, предложить изменения или дополнения, которые создают направленный граф, как в http://bl.ocks.org/mbostock/4062045

Я новичок в D3, и я не мог найти решение, может быть, его тривиальное, но мало помощь приветствуется.

Answer 1

Слияние этих двух примеров прост, и я создал JSFiddle to demo. Во-первых, добавить определение стиля стрелки в SVG:

// build the arrow. 
svg.append("svg:defs").selectAll("marker") 
    .data(["end"])  // Different link/path types can be defined here 
    .enter().append("svg:marker") // This section adds in the arrows 
    .attr("id", String) 
    .attr("viewBox", "0 -5 10 10") 
    .attr("refX", 15) 
    .attr("refY", -1.5) 
    .attr("markerWidth", 6) 
    .attr("markerHeight", 6) 
    .attr("orient", "auto") 
    .append("svg:path") 
    .attr("d", "M0,-5L10,0L0,5"); 

Затем просто добавить маркер к вашему links

.attr("marker-end", "url(#end)"); 

Вы в конечном итоге с чем-то вроде этого:

Вы увидите, что некоторые стрелки больше других, потому что не все ссылки имеют одинаковые stroke-width. Если вы хотите, чтобы все стрелки были одинакового размера, просто измените

.style("stroke-width", function(d) { return Math.sqrt(d.value); }) 

при добавлении ссылок.