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

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:Curve 整理一下 make 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;

这个 returns 贝塞尔曲线，所以 'dr' 基本上是多少曲线，请参阅此以获取更多信息：http://tutorials.jenkov.com/svg/path-element.html

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

已更新 fiddle：http://jsfiddle.net/1hxcqL1c/1/

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

How can I make straight line instead of curve line in d3 force layout?

javascript

svg

d3.js