0

在使用 vis.js 创建图形时，我们可以使用选项指定如何显示节点。

var options = {
  width: '400px',
  height: '400px',
  edges:{
    style:'arrow'
  },
  nodes:{
    shape:'icon'
  }
};

通过使用 'icon' 作为样式，我们可以使用 bootstrap 或 fontawesome 字形图标。该文档讨论了使用 unicodes。

创建了一个 Plunker 并且图标没有出现。

http://plnkr.co/edit/DFYz26SOxGY9IvMqSuKm?p=preview

不知道我做错了什么。

谢谢

4

1 回答 1

5

我看了看你的 plunker 并在这里修复了它：

http://plnkr.co/edit/NQarGkQSYeg3Cl0SdBGy?p=preview

我是 vis.js 的开发者之一，我想解释一下这里出了什么问题。首先，您需要包含 fontawesome 的 css，以便 vis 知道在哪里可以找到字形。所以我们添加： < link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

其次，通过您的 plunker，您将节点的形状设置为“圆形”。这意味着节点不会关心图标选项。在您的问题中，您已将节点形状设置为“图标”。这意味着，节点将使用附加图标选项来配置图标。

所以我们添加（到全局节点选项）：
iconFontFace:'FontAwesome',
iconSize:50

现在为 unicode。您需要指定应该向您显示哪个图标。这是通过图标选项完成的。那么我们在哪里可以找到 unicode 呢？让我们看看这个例子： http: //fortawesome.github.io/Font-Awesome/icon/coffee/ 我们发现：

fa-coffee · Unicode：f0f4 · 创建时间：v3.0 · 类别：Web 应用程序图标
所以unicode是f0f4，在javascript中我们把它写成
\uf0f4

从您的问题中，我注意到图标没有默认设置，这将在 4.0 版本中修复。

如需进一步参考，您可以查看文档：

http://visjs.org/docs/network.html#Nodes_configuration

一个带有来自 fontawesome 和 Ionicons 的多个图标的工作示例：

http://visjs.org/examples/network/38_node_as_icon.html

最后，下次您有问题时，请在我们的 Github 页面上发布，我们会尝试收集那里的所有问题 :)

https://github.com/almende/vis/issues

祝你好运！

于 2015-04-20T09:14:14.713 回答