d3.js - d3js 强制布局中链接上的箭头

Question

我正在使用力布局来表示有向未加权网络。我的灵感来自以下例子:http://bl.ocks.org/mbostock/1153292



我试图制作不同大小的节点，但我有一个小问题。
用于在每个链接上绘制箭头的标记指向圆的中心。如果圆圈太大，它会完全覆盖箭头。

我该如何处理？

Answer 1

如果您将使用 <line>而不是 <path> ，以下应该对您有用，我在我当前的解决方案中使用它。它基于@ɭɘ ɖɵʊɒɼɖ江戸解决方案:

在您的 tick事件监听器:

linkElements.attr("x1", function(d) { return d.source.x; })
        .attr("y1", function(d) { return d.source.y; })
        .attr("x2", function(d) { 
             return getTargetNodeCircumferencePoint(d)[0];
        })
        .attr("y2", function(d) { 
             return getTargetNodeCircumferencePoint(d)[1];
        });

function getTargetNodeCircumferencePoint(d){

        var t_radius = d.target.nodeWidth/2; // nodeWidth is just a custom attribute I calculate during the creation of the nodes depending on the node width
        var dx = d.target.x - d.source.x;
        var dy = d.target.y - d.source.y;
        var gamma = Math.atan2(dy,dx); // Math.atan2 returns the angle in the correct quadrant as opposed to Math.atan
        var tx = d.target.x - (Math.cos(gamma) * t_radius);
        var ty = d.target.y - (Math.sin(gamma) * t_radius);

        return [tx,ty]; 
}

我确信可以修改此解决方案以适应 <path>元素，但我还没有尝试过。