[英]How to avoid the line overlapping on node and reroute the line in d3js
I am adding the circles dynamically and maintaining the connection between the circle like this我正在动态添加圆圈并像这样保持圆圈之间的连接
let drawLine = d3.svg.line().x(d => d[0]).y(d => d[1]);
let path = svg.append('path').
attr('stroke', 'red').
attr('stroke-width', 5).
attr('fill', 'none').
attr('d', drawLine([[x1, y1], [x2, y2]]));
As i am adding nodes dynamically, if there is any connection overlapped on the node then i want to reroute that line in a different path(Any path that should not overlap on any of the node) Static example当我动态添加节点时,如果节点上有任何重叠的连接,那么我想在不同的路径中重新路由该线(任何不应在任何节点上重叠的路径) Static 示例
In the above example there are 3 circles and there is connection between 2 big circles.在上面的例子中,有 3 个圆圈,两个大圆圈之间有连接。 The connected path is overlapped on the one small circle in the middle.
连接的路径重叠在中间的一个小圆圈上。 so i want to maintain the same connection between those 2 circles but it shouldn't overlap on the nodes.
所以我想在这两个圆圈之间保持相同的连接,但它不应该在节点上重叠。 I am new to d3 and i am not sure like d3.svg.line() is correct way to maintain the non overlapping connection between the nodes.
我是 d3 的新手,我不确定 d3.svg.line() 是保持节点之间非重叠连接的正确方法。 Please suggest.
请建议。
You can use Quadtatic Bezier curve instead:您可以改用二次贝塞尔曲线:
let svg = d3.select('#panel') svg.append('circle').attr('r', 40).attr("cx", 50).attr("cy", 50); svg.append('circle').attr('r', 40).attr("cx", 350).attr("cy", 50); svg.append('circle').attr('r', 20).attr("cx", 200).attr("cy", 50); let lineGenerator = d3.svg.line().x(d => d[0]).y(d => d[1]); const quadraticBezierLineGenerator = d => `M ${d[0][0]},${d[0][1]} Q ${(d[0][0] + d[1][0])/2}, ${d[0][1] - 60} ${d[1][0]},${d[1][1]}`; let path = svg.append('path'). attr('stroke', 'red'). attr('stroke-width', 5). attr('fill', 'none'). attr('d', quadraticBezierLineGenerator([[92, 50], [309, 50]]));
svg { width: 100%; height: 100%; } svg circle { fill: white; stroke: black; stroke-width: 3; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script> <svg id="panel"></svg>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.