在D3.js中创建双向图

Question

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

我正在使用此曲线图编辑器：

http://bl.ocks.org/rkirsling/5001347

两个问题：

1. 我没有找到关于如何显示双向箭头的信息 使用SVG

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

我希望这个功能可以从网络上访问。我第一次用Python和NetworkX和Bokeh一起启动这个项目，但是遇到了一些显示问题，发现部署为web应用程序的直观性要差得多。在

D3.js功能强大，非常漂亮，而且有很好的文档记录。但由于某些原因，没有人做过任何关于无向力图的研究。这是因为不可能吗？在

我想每个箭头都是不雅的。在

提前谢谢！在

Answer 1

可以使用marker-start和marker-end路径属性显示双向箭头。{cd3}或者直接使用一个包含cd3}元素的css}来定义它们，然后使用一个包含cd3}的元素。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>

使用它们：

^{pr2}$

或者

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

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

还有一个marker-mid将形状应用于路径中间。在

工作演示：

.link { stroke: black; stroke-width: 3px; fill: none; } .arrowed { marker-start: url(#start-arrow); marker-end: url(#end-arrow); } ；

<svg width="200" height="200">
 <defs>
  <marker id="big-arrow" markerWidth="13" markerHeight="13" refX="2" refY="6" orient="auto">
   <path d="M2,2 L2,11 L10,6 L2,2" style="fill: #000000;" />
  </marker>
  <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>
  <marker id="blob" markerWidth="8" markerHeight="8" refX="5" refY="5">
    <circle cx="5" cy="5" r="3" style="stroke: none; fill: #000;" />
   </marker>
  </defs>
 <g>
  <path class="link" style="marker-start: url('#blob'); marker-end: url('#big-arrow');" d="M150,50L50,150" markerUnits="strokeWidth"></path>
  <path class="link arrowed" d="M150,150L50,50"></path>
 </g>
</svg>

；