2015-04-17 92 views
0

使用vis.js創建圖形時,我們可以指定如何使用選項顯示節點。vis.js和fontawesome字形圖標

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

通過使用'圖標'作爲我們使用bootstrap或fontawesome字形圖標的樣式。該文件談到了使用unicodes。

創建一個Plunker和圖標不顯示。

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

不知道我在做什麼錯。

感謝

回答

3

我看了看你plunker,我在這裏固定它:

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">

第二,通過你的蹦牀,你設置節點的形狀爲'圓'。這意味着節點不會關心圖標選項。在你的問題中,你已經將節點形狀設置爲'圖標'。這意味着,節點將使用其他圖標選項來配置圖標。

所以我們增加(全球節點選項):
iconFontFace: 'FontAwesome',
iconSize:50

現在的統一。你需要指定哪個圖標可以顯示給你。這由圖標選項完成。那麼我們在哪裏可以找到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

祝你好運!

+0

非常感謝您的詳細解釋。我確實使用了「圖標」(不是在我的plunker代碼中,而是在我的文章中)。我曾經如何使用不正確的unicodes,並沒有指定iconSize和iconFontFace。 –