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

Question

我想构建一个网络，其中节点表示与卡类似的结构信息。卡片是指由两个区域组成的结构：

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

据我在vis.js文档see example here中可以看到，可以输入段落/文本作为节点标签，但无法通过Html构建节点。

我可以通过使用vis.js / Network达到此目的，还是应该去另一个图书馆？

Answer 1

不幸的是，没有。截至2018年1月，node labels don't support html in general（它们是画布的一部分，因此将任意html片段合并到其中并不容易）。只有有限的标记（html-emulating和markdown）允许同一标签中的多个字体大小/颜色/系列（最多4个，afaik，=普通和内部<b>，<i>和{ {1}}“标签”）+您可以将图片用作节点的形状（<code>或shape: 'icon'或'image'）。

Here您可以找到使用多种方法的示例：它们定义

'circularImage'

在选项和节点的此类标签中：

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

考虑特定的“卡片案例”（在评论中描述）

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

• 添加按钮，将新网络节点悬停在卡片本身上方，并使用自定义点击处理程序;
• 如果您需要通过拖放操作将这些卡片作为一个整体移动，您还必须在选择卡片时选择与该卡片相对应的所有“按钮节点”，并选择那些与未选择状态无法区分的按钮

这可能有一些副作用/涉及一些额外的编码，但至少会像你所描述的那样工作。

PS：html里面的SVG技术

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