Dagre-D3 图。 egde路径可以自定义吗？

Question

我已经成功地使用 dagre-d3 图形布局库创建了一些图形。该库运行良好，但似乎缺少文档。

我的图表真的很像这个例子：http://cpettitt.github.io/project/dagre-d3/latest/demo/interactive-demo.html

我真正想做的是自定义边缘，使它们看起来像这张图片：

所以，基本上，我需要自定义表示边缘的 svg 路径元素。我做了一些研究，似乎可以使用 graphviz 样式（箭头、颜色等），但还没有找到任何方法来自定义连接路径本身。

是否可以通过某种方式自定义它？

Answer 1

查看 this graph。它展示了如何在边缘上使用样式、更改边缘的布局方式 (lineInterpolate) 以及如何移除箭头。

有关样式的更多详细信息，请参阅 https://github.com/dagrejs/dagre-d3/wiki#demos。特别是，以下内容可能会有所帮助：

• 样式属性：https://dagrejs.github.io/project/dagre-d3/latest/demo/style-attrs.html
• 内置形状：https://dagrejs.github.io/project/dagre-d3/latest/demo/shapes
• 内置箭头：https://dagrejs.github.io/project/dagre-d3/latest/demo/arrows.html
• 用户定义的形状和箭头：https://dagrejs.github.io/project/dagre-d3/latest/demo/user-defined.html

Answer 2

tl;dr: 在设置边缘时添加 属性 lineInterpolate: 'basis' 将绘制弯曲的边缘。例如，

...
g.setEdge('A', 'B', { lineInterpolate: 'basis' });
...

有关详细信息，请参阅 this PR。