如何在d3js中获得链接边缘和节点的交集？答案

【问题标题】：How to get intersection of link-edge and node in d3js?如何在d3js中获得链接边缘和节点的交集？
【发布时间】：2020-04-12 20:18:39
【问题描述】：

我想要许多节点形状（圆形、方形...）这是我的JSfiddle prototype 问题是箭头放置：

它们在js中是这样创建的：

   svg.append('svg:defs').append('svg:marker')
     .attr('id', 'end-arrow')
     .attr('viewBox', '0 -5 10 10')
     .attr('refX', 6)
     .attr('markerWidth', 3)
     .attr('markerHeight', 3)
     .attr('orient', 'auto')
     .append('svg:path')
     .attr('d', 'M0,-5L10,0L0,5')
     .attr('fill', 'red');
//...
   var link = svg.selectAll(".link")
     .data(graph.links)
     .enter().append("line")
     .attr("class", "link");

和css：

.link {
  stroke: #7a4e4e;
  stroke-width: 3px;
  stroke-opacity: 1;
  marker-end: url(#end-arrow);
}

箭头应该是我画绿色标记的地方，但它们在中心（红色标记）。它们的方向正确，但放错了位置。 d3js中如何让箭头在link-edge和node的交点上？

【问题讨论】：

标签： d3.js graph rendering arrows webcola

【解决方案1】：

您可以使用该功能

route = cola.makeEdgeBetween(source: Rectangle, target: Rectangle, ah: number)

您的源和目标是节点的边界，ah 是箭头大小的一些偏移量。这会给你3个坐标

 * @return An object with three point properties, the intersection with the
 *         source rectangle (sourceIntersection), the intersection with then
 *         target rectangle (targetIntersection), and the point an arrow
 *         head of the specified size would need to start (arrowStart).

随后您可以使用 sourceIntersection 和 arrowStart 坐标绘制一条线

但是，这些节点在 webcola 中都被视为矩形，因此对于您的圆形节点，它们将停在包围该圆圈的矩形边缘，如果您不希望这样做，则必须通过增加通过计算该距离的线

【讨论】：