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/cpettitt/dagre-d3/wiki#demos。特别是，以下内容可能会有所帮助：

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

Answer 2

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

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

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