箭头未触及d3.js中的节点

Question

我在d3v4中创建了强制布局。链接上添加的标记以表示方向，如给定的Jfiddle https://jsfiddle.net/rjyk72ea/所示。
要求是箭头应与节点接触，但当链接沿节点的对角线方向时，箭头（部分或全部）隐藏在节点下方。解决这个问题？

var mark = diagramLayout.append("svg:defs").selectAll("marker")//
    .data(["end"])      // Different link/path types can be defined here
    .enter().append("svg:marker")    // This section adds in the arrows
    .attr("id", String)
    .attr("viewBox", "0 -5 10 10")
    .attr("refX", markerRefx)
    .attr("refY", 0)
    .attr("markerWidth", 5)
    .attr("markerHeight", 5)
    .attr("orient", "auto")
    .attr("stroke", "#000")
    .attr("fill", "#000")
    .append("svg:path")
    .attr("d", "M0,-5L10,0L0,5")
    .style("stroke-width", "0.3px")
}

Answer 1

您的圆角正方形是有问题的。您有两种选择：将它们视为圈子，并按照我在此问题中所做的做。或将它们视为矩形（正方形）并找到与正方形的交点。既然，我已经给圆了一个先前的答案，那么让我们来谈谈正方形（矩形）/直线相交。

现在，我将不讨论矩形/直线相交背后的数学细节（谷歌会搜索大量资源），所以让我们从这个很棒的答案开始（值得更多推荐）并应用这是你的问题。

首先，我更改您的链接代码以使用svg path而不是line。我认为更干净，更轻松。使用我上面链接的功能，变得很容易：

 function ticked(e) {

    link.attr("d", function(d) {

      var inter = pointOnRect(d.source.x, d.source.y,
        d.target.x - 20, d.target.y - 20,
        d.target.x + 20, d.target.y + 20);

      return "M" + d.source.x + "," + d.source.y + "L" + inter.x + "," + inter.y;
    });

    ....

这是完整的运行代码：

 function ticked(e) {

    link.attr("d", function(d) {

      var inter = pointOnRect(d.source.x, d.source.y,
        d.target.x - 20, d.target.y - 20,
        d.target.x + 20, d.target.y + 20);

      return "M" + d.source.x + "," + d.source.y + "L" + inter.x + "," + inter.y;
    });

    ....