Question

我需要在边缘中间渲染一个箭头标记。我的代码（JSFiddle）可以在[link][1]找到。

但是我怎么能用直线代替曲线？

[1]: http://jsfiddle.net/fekkyDev/1hxcqL1c/

Answer 1

在你的勾选功能中你有这个：

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

最简单的方法就是理顺SVG：你做的曲线让dr = 0：

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);
        dr = 0;
        return "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr + " 0 0,1 " + d.target.x + "," + d.target.y;
    });

这个：

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

这会返回一条bezier曲线，因此'dr'基本上是多少曲线，有关详细信息，请参阅此内容：http://tutorials.jenkov.com/svg/path-element.html

尽可能多地阅读并尝试理解您的代码！

更新了小提琴：http://jsfiddle.net/1hxcqL1c/1/

如何在d3力布局中制作直线而不是曲线？

1 个答案: