0

vis.js を使用してグラフを作成する際に、オプションを使用してノードを表示する方法を指定できます。

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

スタイルに 'icon' を使用することで、ブートストラップまたは fontawesome グリフ アイコンのいずれかを使用します。ドキュメントでは、ユニコードの使用について説明しています。

プランカーを作成しましたが、アイコンが表示されません。

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

私が間違っているのかわかりません。

ありがとう

4

1 に答える 1

5

私はあなたのプランカーを見て、ここで修正しました：

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

私は vis.js の開発者の 1 人であり、ここで何が問題なのかを説明したいと思います。まず、fontawesome の css をインクルードして、vis がグリフの場所を認識できるようにする必要があります。したがって、次を追加します。 < link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

次に、プランカーを使用して、ノードの形状を「円」に設定します。つまり、ノードはアイコン オプションを気にしません。あなたの質問では、ノードの形状を「アイコン」に設定しました。つまり、ノードはアイコンを構成するために追加のアイコン オプションを使用します。

そのため、（グローバル ノード オプションに）追加しました:
iconFontFace:'FontAwesome',
iconSize:50

次にユニコードです。表示するアイコン vis を指定する必要があります。これは icon オプションによって行われます。ユニコードはどこにあるのでしょうか？この例を見てみましょう: http://fortawesome.github.io/Font-Awesome/icon/coffee/ そして、次のことがわかります:

fa-coffee · Unicode: f0f4 · 作成: v3.0 · カテゴリ: Web アプリケーション アイコン
したがって、ユニコードは 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 に答える