使用 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;