如何在d3力布局中直线而不是曲线？ [英] How can I make straight line instead of curve line in d3 force layout?

问题描述

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

I need to render an arrow marker in the middle of the edge. My code (JSFiddle) can be found at [link][1].

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

推荐答案

在您的tick函数中，你有：

In your tick function you have this :

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 you make so make dr = 0： / p>

The easiest way is just to straighten out the SVG:Curve you made so 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;

这返回一个贝塞尔曲线，所以'dr'是多少曲线基本上， ： http://tutorials.jenkov.com/svg/path-element.html

this returns a bezier curve, so 'dr' is how much curve basically, see this for more info : http://tutorials.jenkov.com/svg/path-element.html

阅读尽可能多，并尝试了解您的代码！

Read as much as you can and try understand your code !

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

这篇关于如何在d3力布局中直线而不是曲线？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！