使用 dagre-d3 定位边缘答案

【问题标题】：Positioning the edges using dagre-d3使用 dagre-d3 定位边缘
【发布时间】：2015-07-16 12:27:05
【问题描述】：

我有一个图，其中边缘与这样的节点重叠

我可以让边缘从节点的右中间开始，而不是从顶部中心开始，就像这张图片
是否有任何属性可以解决此问题？

【问题讨论】：

你找到方法了吗？

【解决方案1】：

是的，您应该能够相对轻松地做到这一点。您可能需要提供一些代码来充分演示，但基本上您希望为您的行添加 x 值。

.attr("x", function(d) { return d.x + nodeWidth / 2; });

因此，如果您要添加一些行，您的代码可能如下所示：

var links = d3.selectAll(".link")
              .data(data)
              .enter()
              .attr("x1", function(d) { return d.x1 + nodeWidth / 2; })
              .attr("y1", function(d) { return d.y1; })
              .attr("x2", function(d) { return d.x2; })
              .attr("y2", function(d) { return d.y2; });

【讨论】：

var g = new dagreD3.graphlib.Graph().setGraph({rankdir: "LR", nodesep:20, edgesep:25}); g.setEdge（k，vlu，{箭头：“vee”，箭头样式：“填充：#383838”}）；我们可以在 setEdge dagre-d3 函数中传递 x 和 y 吗？
@Srinivas 抱歉，我没有意识到涉及到另一个库。您可以粘贴一些代码/html 来演示实际渲染的工作原理吗？可能您可以在之后选择所有路径并移动它们的 x 值，这与我的答案基本相同，但是在不了解您的代码的情况下，我无法提供确切的详细信息。

【解决方案2】：

这是一个老问题，但为了将来参考，我是这样处理的：

为节点提供自定义形状：

（请注意，下面的intersect 函数是将所有边聚集到同一个端口的实际部分）

const POINT_RADIUS = 3;
function renderNode(parent, bbox, node) {
  parent.selectAll('rect, circle').remove();
  parent.insert('circle', ':first-child')
    .attr('cx', -bbox.width / 2)
    .attr('cy', 0)
    .attr('r', POINT_RADIUS)
    .attr('class', 'port in');

  parent.insert('circle', ':last-child')
    .attr('cx', bbox.width / 2)
    .attr('cy', 0)
    .attr('r', POINT_RADIUS)
    .attr('class', 'port out');

  parent.insert('rect', ':first-child')
    .attr('x', -bbox.width / 2)
    .attr('y', -bbox.height / 2)
    .attr('width', bbox.width)
    .attr('height', bbox.height);

  node.intersect = (point) => {
    const w = node.width / 2;
    return { x: node.x + (point.x < node.x ? -w : w), y: node.y };
  };
  return parent;
}

然后将此形状分配给节点形状：

const render = new dagreD3.render();
render.shapes().node = renderNode;

【讨论】：