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

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

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

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

两个问题:

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

我希望可以从网上访问此功能。我首先使用Python和NetworkX和Bokeh开始了这个项目,但是遇到了一些显示问题,发现将其部署为Web应用程序要直观得多。

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

附言我曾考虑过仅在每个方向上添加一个箭头,但这似乎不太雅致,并且可能存在显示和引用问题。

提前致谢!

参考方案

您可以使用marker-startmarker-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可以进行网络分析,但这是专有软件。我确定那里还有其他人。

在PHP文件中调用javascript函数并在加载HTML文件之后? - javascript

我需要在我的php中调用js函数,但无法正常工作。有人可以告诉我我在做什么错吗?我该如何轻松地做到这一点?谢谢!我有三个文件:  mail.php负责发送$ _POST的内容(工作正常)。我调用我的javascript函数来切换模式,具体取决于邮件是否已发送。 <? ... $response = $sendgrid->send($email);…

如何使用PHP从动态输入字段捕获数组值? - javascript

我正在编写一个在线时间跟踪网页,允许用户将学习时间输入该系统。用户将首先输入名称,然后根据日期输入学习时间。一天中可能会有多个学习时间。以下是我第一页的编码,<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"…

用jQuery填充模式形式 - javascript

我正在将订单表从数据库绘制到datatables(jquery插件)中。我要在每笔最后一笔交易或每笔交易中增加付款。问题是,如何获取单击添加付款按钮以添加付款的行的订单ID。其次,当点击addpayment时,它会弹出一个带有字段或订单号的模态表单。我想用在td中找到的订单ID填充该字段,并使其不可编辑或隐藏,但在提交模态表单时将其发布到服务器。表格和模式表…

PHP stringID无法从回显中读入onclick - javascript

我有一个音频播放器,可以在HTML中正常工作,但是当我从PHP回显调用时,似乎没有得到div ID的名称,因此它无法播放我的音频。这是我的代码:// Show audio if ($sObj->get('audio') != null) { $sAudio = $sObj->get('audio'); $a…

在php中单击按钮添加表行并设置字段值 - javascript

我有一个表单,必须在单击按钮时添加表行。这是我必须动态添加的表行:(addProdToGroup.php)<tr style="text-align: center;" id="products"> <td><?php $j ?></td> <td><s…