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>元素,但我没有尝试过.

Answer 2

您可以通过节点的半径来偏移链接的目标,即调整代码

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

通过改变的值d.target.x,并d.target.y采取半径(这将需要的数据的一部分,像d.target.radius)考虑在内.也就是说,将箭头的末端偏移圆半径.