Question

使用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

不确定我做错了什么。

由于

Answer 1

我看了看你的傻瓜，我在这里修好了：

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

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

其次，通过您的plunker，您将节点的形状设置为＆＃39; circle＆＃39;。这意味着节点不会关心图标选项。在您的问题中，您已将节点形状设置为＆＃39; icon＆＃39;。这意味着，节点将使用其他图标选项来配置图标。

所以我们添加（到全局节点选项）：
iconFontFace：＆＃39; FontAwesome＆＃39 ;,
iconSize：50

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

fa-coffee  · Unicode: f0f4 · Created: v3.0 · Categories: Web Application Icons

所以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

祝你好运！

vis.js和fontawesome标志符号图标

1 个答案: