javascript - 如何增加 Vis.js 网络图节点中的标签填充？

Question

使用Vis.js创建网络图时，网络中的节点使用标签绘制——对于我的用例——没有足够的“填充”，即节点标签文本和边界之间没有足够的空间节点。下图说明了它：

考虑到 Vis.js 中已经有大量可用的配置选项，我认为增加标签填充会很简单，但对于我的生活，无法弄清楚如何去做。浏览了官方文档，并通过 StackOverflow 和 Google 进行了搜索，但没有找到任何提示。感觉好像我遗漏了一些明显的东西 - 任何人都可以阐明一下吗？...

Answer 1

我找到了它——至少它适用于我使用 npm 安装的 vis@4.20.1。他们使用边距来修改边框和标签文本之间的空间。

您传入的选项对象，它需要一个margin属性，nodes如下所示：

const options = {
  nodes: {
    margin: 10
  }
}

您还可以像这样为顶部、底部、右侧、左侧指定不同的边距：

const options = {
  nodes: {
    margin: {
      top: 10,
      bottom: 20,
      left: 5,
      right: 5
  }
}

除了 px，我似乎无法指定任何内容 - 我尝试使用 '1em' 作为输入，但它似乎只需要整数值 - 并以像素表示。

如果您好奇，我从options.js位于node_modules\vis\lib\network. 如果您正在寻找 vis 的其他区域（如时间线）的选项，我敢打赌在类似的文件夹中有一个选项文件。

Answer 2

此属性尚未可自定义，但我设法直接在vis.js源文件中更改它：

• 搜索 Box 类定义：var Box = function (_NodeBase)
• 在 resize 函数中有修改的边距：var margin = 5;
• 把它改成你想要的，它就完成了

Answer 3

我一直在遇到同样的问题。我找到的唯一解决方案是将节点设置borderWidth为borderWidthSelected我想要的填充量。为了让它看起来不会太难看，还可以将边框设置为与节点背景相同的颜色。

此外，它使图形具有漂亮的现代平面外观。