如何将标签和箭头添加到定向图中的链接中？

发布于 2025-02-04 13:12:31 字数 883 浏览 2 评论 0原文

我有一个定向图的图形，如 jsfiddle 。我一直在尝试在中央节点的每个链接的末尾添加一个箭头，因为每次尝试都会产生一些错误，这是绝对的初学者，我根本无法调试。此外，我还想标记每个链接（包含，排除或豁免），这些链接被描述为链接数组中的类型字段（请检查JSFIDDLE）。另外，D3是否允许自定义DIV用作节点？我想知道是否可以将节点文本放在DIV中，并具有以下CSS属性：

.node
{
  border: 1px solid red;
  padding: 5px;
  border-radius: 5px;
}

类似于是我需要的，除了节点需要在矩形卡中（正如上面的CSS应用所需的那样）。但是，我从代码中移植的尝试徒劳无功。请注意，我正在使用D3 JS V5。这是另一个示例我未能将其移植到D3 V5。

这是我想实现的目标：理想情况下：

原文

I have a force directed graph as shown in the JSFiddle. I have been trying to add an arrow at the end of every link from the central node with no success as every attempt generates some error, which being an absolute beginner, I simply can't debug. Besides, I would also like to label every link (with INCLUDES, EXCLUDES, or EXEMPTS) which are described as type fields in link array (please check the JSFiddle). Also, does D3 allow for custom divs to be used as nodes? I was wondering if the node text could be placed in a div with the following CSS properties:

.node
{
  border: 1px solid red;
  padding: 5px;
  border-radius: 5px;
}

Something like this is what I need, except that the nodes need to be in a rectangular card (as applying the CSS above would do). However, my attempts to port from the code have been in vain. Please note that I am using d3 js v5. Here's another example which I have failed to port to d3 v5.

Here's what I am trying to achieve, ideally: