1

我想要很多节点形状（圆形，方形......）这是我的JSfiddle 原型问题是箭头放置： 在此处输入图像描述

它们在 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中的链接边缘和节点的交点上？

4

1 回答 1

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 中都被视为矩形，因此对于您的圆形节点，它们将停在包围该圆圈的矩形的边缘，如果您不希望这样做，则必须通过增加线的长度来补偿它计算那个距离

于 2020-06-03T09:33:38.220 回答