使用dagre-d3定位边缘

Question

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

​

​

1. 我能让边缘从节点的右边开始，而不是从顶部的中心开始，就像这张图像

​

1. 有没有处理这个问题的属性？

Answer 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; });

Answer 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;