在d3网络图上添加单个方向箭头

时间:2016-01-11 17:49:46

标签: javascript d3.js

我想添加单个箭头(一个用于从节点A到B的路径,另一个用于B到A)到我已经制作的d3图形(参见Plunker版本here),而不是在每一端添加一个带有两个箭头的箭头。

我试图按here修改我的刻度函数,但这似乎不起作用(箭头从A到B,然后从B到A不分开):

var path = svg.append("svg:g").selectAll("path")
.data(force.links())
.enter().append("svg:path")
.attr("class", "link")
.attr("marker-end", "url(#end)");

function tick() {
path.attr("d", function(d) {
var dx = d.target.x - d.source.x,
    dy = d.target.y - d.source.y,
    dr = Math.sqrt(dx * dx + dy * dy);
return "M" + 
    d.source.x + "," + 
    d.source.y + "A" + 
    dr + "," + dr + " 0 0,1 " + 
    d.target.x + "," + 
    d.target.y;
});

有没有人知道我该怎么做?

最佳,

0 个答案:

没有答案