d3js 强制布局中链接上的箭头 [英] arrows on links in d3js force layout

问题描述

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

I'm using the force layout to represent a directed unweighted network. My inspiration comes from the following example: http://bl.ocks.org/mbostock/1153292

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

I tried to make nodes of different sizes, but I have a little problem. The marker used to draw the arrow on each link points to the center of the circle. If the circle is too big it covers completely the arrow.

我该如何处理?

推荐答案

如果您将使用 而不是 ，以下应该为您工作，我在我当前的解决方案中使用它.依据@ɭɘ ɖɵʊɒɼɖ江戸解:

If you will use a <line> instead of <path>, the following should work for you, I have it working in my current solution. It's based on @ɭɘ ɖɵʊɒɼɖ 江戸 solution:

在您的 tick 事件侦听器中:

In your tick event listener:

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

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

I am sure this solution can be modified to accomodate <path> elements, however I haven't tried it.

这篇关于d3js 强制布局中链接上的箭头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！