У меня есть график, где ребра перекрываются с узлами, как это

график

  1. Могу ли я сделать так, чтобы края начинались с правой середины узла вместо верхнего центра, как на этом изображении Graph2
  2. Есть ли атрибут, который решает эту проблему?

Да, вы должны быть в состоянии сделать это относительно легко. Вам, вероятно, нужно предоставить некоторый код для полной демонстрации, но в основном вы хотите добавить к своему значению x свои строки.

.attr("x", function(d) { return dx   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; }); 

Это старый вопрос, но для дальнейшего использования, вот как я справился с этим:

Предоставьте индивидуальную форму для узла:

(обратите внимание, что функция 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) ={amp}gt; { const w = node.width / 2; return { x: node.x   (point.x {amp}lt; node.x ? -w : w), y: node.y }; }; return parent; } 

Затем назначьте эту фигуру форме узла:

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