javascript - 在 D3.js 中创建双向图

Question

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

我正在使用这个图形编辑器:

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

两个问题:

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

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

我希望可以通过网络访问此功能。我首先使用 Python 与 NetworkX 和 Bokeh 开始这个项目，但遇到了一些显示问题，并发现部署为 Web 应用程序不太直观。

D3.js 功能强大、美观且文档齐全。但由于某种原因，没有人对无向力图做过任何事情。这是因为不可能吗？

附注我考虑过在每个方向添加一个箭头，但这看起来不优雅，并且可能存在显示和引用问题。

提前致谢!

Answer 1

您可以使用 marker-start 和 marker-end 路径属性显示双向箭头。在包含要使用的箭头形状的 SVG 的 defs 中定义一个或多个 marker 元素，为每个元素指定一个 ID，然后使用以下任一方法将它们应用到您的路径css 或直接使用样式属性。例如

<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" />

还有一个 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>

对于 Q2，d3 允许您将数据绑定(bind)到 DOM 元素或使用已建立的算法计算布局，但它除了简单的图形遍历之外并没有真正处理太多内容，并且它不保存可以推理的网络的内部表示或用于计算。它不能用于与 Networkx 等同类分析。我知道至少有一个 JS 库 KeyLines 可以进行网络分析，但它是专有软件；我确信还有其他人。