vis.js和驚人的字形圖標

Question

在使用vis.js創建圖形時，我們可以使用選項指定如何顯示節點。

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

通過使用“ icon”作為樣式，我們可以使用bootstrap或fontawesome字形圖標。 該文檔討論有關使用unicode的信息。

創建了一個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">

其次，沿着您的混蛋，將節點的形狀設置為“圓形”。 這意味着節點將不關心圖標選項。 在您的問題中，您已將節點形狀設置為“ icon”。 這意味着，節點將使用其他圖標選項來配置圖標。

因此，我們添加了（在全局節點選項中）：
iconFontFace： 'FontAwesome'，
iconSize：50

現在為unicode。 您將需要指定應該顯示給您的圖標。 這是通過圖標選項完成的。 那么，我們在哪里可以找到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的多個圖標的工作示例：

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

總結一下，下次您遇到問題時，請將其發布在我們的Github頁面上，我們將嘗試收集那里的所有問題:)

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

祝好運！