Question

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

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

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

两个问题：

我没有找到有关如何显示双向箭头的信息 SVG
我希望能够在这些节点上运行计算，并引用它们的相邻节点并更改它们的属性。因此，我不仅希望显示的边缘是双向的，还希望它们的代码中表示为双向/无方向的，这样我就可以操作它们。

我希望可以从网上访问此功能。我首先使用带有NetworkX和Bokeh的Python来启动该项目，但遇到了一些显示问题，发现将其部署为Web应用程序不太直观。

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

P.S。我曾考虑过仅在每个方向上添加一个箭头，但这似乎不太美观，并且可能存在显示和引用问题。

谢谢！

Answer 1

您可以使用marker-start和marker-end路径属性显示双向箭头。在SVG的marker中定义一个或多个defs元素，其中包含要使用的箭头形状，给每个ID指定一个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允许您将数据绑定到DOM元素或使用已建立的算法来计算布局，但是除了简单的图遍历之外，它实际上并不能处理很多其他事情，并且不包含可以推理的网络内部表示或用于计算。它不能用于与networkx之类的同类分析。我知道至少有一个JS库KeyLines可以进行网络分析，但这是专有软件。我确定那里还有其他人。

在D3.js中创建双向图

1 个答案: