Javascript 在D3.js中创建双向图

我正在构建一个web应用程序，允许用户与双向图形交互，并玩游戏探索图论

我正在使用此图形编辑器：

两个问题：

我找不到有关如何显示双向箭头的信息 使用SVG

我希望能够在这些节点上运行计算，引用它们的相邻节点并更改它们的属性。因此，我不希望边缘看起来是双向的，我希望它们在代码中被表示为双向的，这样我就可以操纵它们了

我希望此功能可以从web访问。我第一次使用Python和NetworkX和Bokeh启动这个项目，但遇到了一些显示问题，并发现作为web应用程序部署起来不那么直观

D3.js功能强大、美观，并且有很好的文档记录。但出于某种原因，没有人对无向力图做过任何研究。这是因为不可能吗

另外，我曾考虑在每个方向上添加一个箭头，但这似乎不雅观，可能会有显示和参考问题

---

提前谢谢

您可以使用

标记开始

和

标记结束

路径属性显示双向箭头。在SVG的

defs

中定义一个或多个包含要使用的箭头形状的

marker

元素，为每个元素指定一个ID，然后使用css或直接使用样式属性将它们应用于路径。e、 g

<svg width="200" height="200">
 <defs>
  <marker id="start-arrow" viewBox="0 -5 10 10" refX="4" markerWidth="5" markerHeight="5" orient="auto">
    <path d="M10,-5L0,0L10,5" fill="#000"></path>
  </marker>
  <marker id="end-arrow" viewBox="0 -5 10 10" refX="6" markerWidth="5" markerHeight="5" orient="auto">
   <path d="M0,-5L10,0L0,5" fill="#000"></path> 
  </marker>
 </defs>

 // apply directly using the style attribute
 <path style="marker-start: url('#start-arrow'); marker-end: url('#end-arrow');" d="M0,0L100,100" />

// in your css
.arrowed {
  marker-start: url(#arrow-start);
  marker-end: url(#arrow-end);
}

// in your SVG
<path class="arrowed" d="M0,0L100,100" />