Vis.js网络节点定制化：将卡片作为节点

Question

我想建立一个网络，其中节点代表结构类似于卡片的信息。所谓卡片是由两个区域组成的结构：

1. 多行文本区域，我可以在其中放置来自不同来源的信息，例如姓名、电话号码、地址等。
2. 控制区域，我可以在其中有2-3个按钮（最好带图标），用于最大化节点或使节点成为根/主要节点等。

从vis.js文档中我看到 （请点击此处查看示例），似乎可以将段落/文本输入作为节点标签，但无法通过Html结构化节点。

我能否使用vis.js/Network实现这一点，还是应该选择另一个库？

- EdKa

Answer 1

很不幸，截至2018年1月，节点标签通常不支持HTML（它们是画布的一部分，因此难以将任意HTML片段纳入其中）。只有有限的标记（模拟html和markdown）允许在同一标签中使用几个字体大小/颜色/系列（据我所知，最多达到4个，即普通字体和<b>、<i>和<code>“标签”内部）+您可以将图像用作节点的形状（shape：'icon'或'image'或'circularImage'）。 这里您可以找到一个多字体方法的使用示例：他们定义了

var options = {
  nodes: {
    font: {
      multi: true,
      bold: {
        mod: '',
        color: '#ff0000'
      }
    }
  }
}

在选项和节点标签中：

label: '<b>3306</b>\n3307\n3308'

考虑特定的"卡片情况"（在评论中描述）

您确实可以创建多行文本区域，但只能以hacky方式创建按钮。您可以尝试以下解决方法：

• 将按钮作为新的网络节点添加到卡片上方，并使用自定义单击处理程序；
• 如果您需要通过拖放将这些卡片作为整体移动，则在选择该卡片时还必须选择所有与该卡片对应的“按钮节点”，并使这些按钮的选择状态与非选择状态不可区分。

这可能会产生一些副作用/涉及一定量的额外编码，但至少可以像您所描述的那样工作。

PS：SVG内部的HTML技术

在this question中，作者使用了一种有趣的技术，即使用SVG将html注入到vis.js图形中。我不知道该技术的限制（除了只能插入非交互式html），因此可能值得一试。

- YakovL