javascript - 使用 dagre-d3 定位边缘

Question

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

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

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;