Vis.js 网络节点自定义：卡片作为节点

Vis.js network node customization: cards as nodes

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

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

据我在 vis.js 文档 see example here 中所见，可以输入 paragraph/text 作为节点标签，但无法通过 Html。

我可以使用 vis.js/Network 还是应该去另一个图书馆？

不幸的是，没有。截至 2018 年 1 月，node labels don't support html in general（它们是 canvas 的一部分，因此很难将任意 html 片段合并到其中）。只有有限的标记（html-模拟和降价）允许在同一标签中使用多种字体 sizes/colors/families（最多 4 个，afaik，= plain 和内部 <b>，<i> 和 <code> "tags") + 你可以使用图像作为节点的形状（shape: 'icon' 或 'image' 或 'circularImage'）。

Here 您可能会找到使用多字体方法的示例：他们定义

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

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

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

考虑到特定的 "cards case"（在评论中描述）

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

  • 使用自定义点击处理程序将按钮添加为悬停在卡片本身上方的新网络节点；
  • 如果您需要通过拖放将此类卡片作为一个整体移动，您还必须 select 在卡片得到 selected 时 select 所有与该卡片对应的 "button nodes" 并制作 select这些按钮的离子与非selected 状态无法区分。

这可能需要一些 side-effects/involve 额外的编码，但至少会像您描述的那样工作。

PS: html SVG 技术

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