Question

我一直在玩我的项目的多个D3示例。我刚刚添加了一个功能，其中使用弧线分别显示在相同的两个节点之间的多条线（或链接）。我从http://jsfiddle.net/zhanghuancs/a2QpA/

那里得到了很大的帮助

然后我尝试通过marker属性显示方向性，但是注意到我的箭头显示了我的节点之间的相反方向。例如，如果我有一个节点源A，目标节点B，箭头将从B指向A，而不是A指向B.我创建了一个简单的jsfiddle来显示我的问题。有人可以告诉我我做错了吗？

http://jsfiddle.net/RoshPlaha/5xj4159t/

var path = svg.append("svg:g")
.selectAll("path")
.data(force.links())
.enter().append("svg:path")
.style("stroke", function(e) { return strokeLineColour(e)})
.attr("marker-end", "url(#arrow)");

    <marker id="arrow" viewbox="0 -5 10 10" refX="20" refY="0" markerWidth="10" markerHeight="10" orient="auto">
        <path d="M0,-5L10,0L0,5Z">
    </marker>

我以前使用过上面相同的箭头功能，所以我不确定为什么方向被翻转了。

提前致谢

Answer 1

path d的定义是错误的。你的定义

return "M" + d.source.x + "," + d.source.y + 
            "A" + dr + "," + dr + " 0 0 1," + d.target.x + "," + d.target.y + 
            "A" + dr + "," + dr + " 0 0 0," + d.source.x + "," + d.source.y;

回到源（最后一行）。您需要做的就是删除最后一行。

return "M" + d.source.x + "," + d.source.y + 
            "A" + dr + "," + dr + " 0 0 1," + d.target.x + "," + d.target.y;

完整演示here。

Answer 2

你的滴答功能不正确：

而不是：

// generate svg path
            return "M" + d.source.x + "," + d.source.y + 
                "A" + dr + "," + dr + " 0 0 1," + d.target.x + "," + d.target.y + 
                "A" + dr + "," + dr + " 0 0 0," + d.source.x + "," + d.source.y;    
        });

试试这个：

// generate svg path
            return "M" + d.target.x + "," + d.target.y + 
                "A" + dr + "," + dr + " 0 0 1," + d.source.x + "," + d.source.y + 
                "A" + dr + "," + dr + " 0 0 0," + d.target.x + "," + d.target.y;    
        });

JSFiddle已更新：http://jsfiddle.net/5xj4159t/2/

D3箭头标记表示目标 - 源流，而不是源 - 目标流

2 个答案: