4

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

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

据我从 vis.js 文档中看到的示例，可以输入段落/文本作为节点标签，但无法通过 Html 构造节点。

我可以通过使用 vis.js/Network 来达到这个目的，还是应该去另一个库？

4

1 回答 1

4

很不幸的是，不行。截至 2018 年 1 月，节点标签一般不支持 html（它们是画布的一部分，因此将任意 html 片段合并到其中并不容易）。只有一个有限的标记（html-emulating 和 markdown）允许在同一个标​​签中使用多个字体大小/颜色/系列（最多 4 个，afaik，=plain 和 inside <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 技术

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

于 2018-01-30T17:34:06.580 回答