vis.jsに含まれるNetworkは、ノードとエッジから構成されるネットワークを表示するための可視化ツールです。この可視化ツールは使いやすく、カスタムの形状、スタイル、色、サイズ、画像などをサポートしています。数千のノードとエッジでも、ネットワークの可視化はどんなモダンなブラウザでもスムーズに動作します。さらに、より大量のノードを扱うために、ネットワークはクラスタリングのサポートも提供しています。ネットワークはHTMLのキャンバスを使用して描画されます。
今回は、このライブラリの使い方を整理していく。
ネットワークの表示は、optionsによって制御されます。
options内で適切にモジュール化されており、変更を加えたい設定がどこにあるかわかりやすいです。
モジュールについては後述します。
モジュール名
説明
configure
フィルタリング機能を備えたインタラクティブなオプションエディタを生成します。
edges
エッジの作成と削除を処理し、グローバルなエッジのオプションとスタイルを含んでいます。
groups
グループと、存在しないグループを持つノードの扱いに関するいくつかのオプションを含んでいます。
interaction
ネットワークとのすべてのユーザーインタラクションに使用されます。マウスやタッチイベント、選択、ナビゲーションボタン、ポップアップを処理します。
layout
初期配置および階層配置を管理します。
manipulation
ネットワーク内のデータを変更するためのAPIとオプションのGUIを提供します。
nodes
ノードの作成と削除を処理し、グローバルなノードのオプションとスタイルを含んでいます。
physics
ノードとエッジを最終的な位置に移動させるシミュレーションを行い、安定化を制御します。
var options = {
autoResize: true,
height: '100%',
width: '100%'
locale: 'en',
locales: locales,
clickToUse: false,
configure: {...}, // defined in the configure module.
edges: {...},// defined in the edges module.
nodes: {...},// defined in the nodes module.
groups: {...}, // defined in the groups module.
layout: {...}, // defined in the layout module.
interaction: {...}, // defined in the interaction module.
manipulation: {...}, // defined in the manipulation module.
physics: {...},// defined in the physics module.
}
network.setOptions(options);
Name
Type
Default
Description
autoResize
Boolean
true
ネットワークのコンテナのリサイズを自動的に検出し、それに応じて再描画する場合はtrue。falseの場合、コンテナのリサイズ後に再描画するためにredraw()やsetSize()関数を使用することができる。
width
String
'100%'
キャンバスの幅。パーセンテージまたはピクセル単位で指定可能（例：'400px'）。
height
String
'100%'
キャンバスの高さ。パーセンテージまたはピクセル単位で指定可能（例：'400px'）。
locale
String
'en'
ロケールの選択。デフォルトでは英語が使用される。
locales
Object
defaultLocales
ロケールオブジェクト。デフォルトでは'en'、'de'、'es'、'it'、'nl'、'pt-br'、'ru'がサポートされています。カスタマイズ方法の詳細については、下記のロケールセクションをご覧ください。
clickToUse
Boolean
false
ネットワークがclickToUseに設定されている場合、アクティブ時にのみマウスやタッチイベントに反応します。アクティブ時には、ネットワークの周りに青い影のボーダーが表示されます。ネットワークをアクティブにするにはクリックし、非アクティブにするにはネットワークの外をクリックするか、ESCキーを押します。
メソッド名
説明
remove
ネットワークをDOMから削除し、すべてのHammerバインディングと参照を削除します。
setData
ネットワークのデータを上書きします。physicsモジュールで安定化が有効になっている場合、ネットワークは再度安定化されます。ネットワークを初期化するときにも実行されます。
setOptions
オプションを設定します。使用可能なオプションは上記のモジュールで確認できます。各モジュールには、自身のオプションを含むモジュール名のコンテナが必要です。
on
イベントリスナーを設定します。イベントの種類によって、コールバック関数に異なるパラメータが提供されます。詳細については、ドキュメントのイベントセクションを参照してください。
off
イベントリスナーを削除します。提供する関数は、on関数で使用した関数と完全に同じである必要があります。関数が指定されていない場合、すべてのリスナーが削除されます。詳細については、ドキュメントのイベントセクションを参照してください。
once
イベントリスナーを一度だけ設定します。実行されると、イベントリスナーは削除されます。イベントの種類によって、コールバック関数に異なるパラメータが提供されます。詳細については、ドキュメントのイベントセクションを参照してください。
メソッド名
説明
canvasToDOM
キャンバス座標をDOM上の座標に変換します。入力と出力は {x:Number, y:Number} の形式です。DOMの値はネットワークコンテナに対して相対的です。
DOMtoCanvas
DOM上の座標をキャンバス座標に変換します。入力と出力は {x:Number, y:Number} の形式です。DOMの値はネットワークコンテナに対して相対的です。
redraw
ネットワークを再描画します。
setSize
キャンバスのサイズを設定します。これは自動的にウィンドウのリサイズ時に行われます。
メソッド名
説明
cluster
クラスタリングのためのオプションオブジェクトが説明されています。joinCondition関数にはすべてのノードが渡されます。
clusterByConnection
指定されたノードとその接続されたノードのクラスタを作成します。動作はオプションオブジェクトでカスタマイズできます。このオブジェクトのすべてのオプションは以下で説明されています。joinConditionは接続されたノードのみが渡されます。
clusterByHubsize
ネットワーク内のすべてのノードをチェックし、指定されたハブサイズ以上のエッジを持つノードが対象となります。ハブサイズが定義されていない場合、ハブサイズは平均値に2つの標準偏差を加えた値として決定されます。
対象となるすべてのノードに対して、clusterByConnectionがそれぞれ実行されます。オプションオブジェクトはclusterByConnectionのために説明され、ここでも同様の動作をします。
| clusterOutliers | 1つのエッジを持つすべてのノードを、それぞれの接続されたノードとクラスタ化します。オプションオブジェクトは完全に説明されています。 |
| getNodesInCluster | ノードがどのクラスタに含まれるかを示すnodeIdsの配列を返します。チェーン内の任意のnodeId（特に最初のパラメータとして渡されたもの）が現在のノードリストに存在しない場合、空の配列が返されます。 |
| getEdgesInCluster | 提供されたエッジから作成されたすべてのエッジIDを返します。このメソッドは非推奨です。代わりにgetBaseEdges()を使用してください。 |
| getBaseEdge | クラスタ化されたエッジIDが利用可能な場合、このメソッドはデータ.edgesで提供された元のbaseEdgeIdを返します。 |
| getBaseEdges | クラスタ化されたエッジIDに対して、データ.edgesで提供されたすべての元のbase edge idを返します。非クラスタ化（つまり「base」）エッジの場合、clusteredEdgeIdが返されます。 |
| updateEdge | クラスタ化されたノード間の可視エッジは、データ.edgesで提供されたものとは異なるエッジです。このメソッドはエッジID（データ.edgesからの元のbase edgeId）を受け取り、それにオプションを適用し、クラス
| updateClusteredNode | クラスタノードを更新します。 |
| isCluster | 指定したIDのノードがクラスタである場合、trueを返します。 |
| getNodesInCluster | クラスタが開かれた場合に解放されるすべてのノードのnodeIdの配列を返します。 |
| openCluster | クラスタを開き、含まれるノードとエッジを解放し、クラスタノードとクラスタエッジを削除します。オプションオブジェクトはオプションであり、現在はreleaseFunctionという1つのオプションをサポートしています。releaseFunctionは、クラスタが開かれた後にノードを手動で配置するために使用できる関数です。 |
| focus | 指定したノードにフォーカスを当てます。オプションを指定して動作をカスタマイズできます。 |
| moveTo | カメラをアニメーションや移動に使用します。オプションを指定して動作をカスタマイズできます。 |
メソッド名
説明
getSeed
ネットワークの現在のレイアウトのシード値を取得します。
メソッド名
説明
enableEditMode
編集モードを有効にします。
disableEditMode
編集モードを無効にします。
addNodeMode
ノードの追加モードに移行します。
editNode
選択したノードを編集します。
addEdgeMode
エッジの追加モードに移行します。
editEdgeMode
エッジの編集モードに移行します。
deleteSelected
選択されたオブジェクトを削除します。
メソッド名
説明
getPositions
ノードの位置情報を取得します。
getPosition
特定のノードの位置情報を取得します。
storePositions
ノードの位置情報をDataSetに保存します。
moveNode
ノードを移動します。
getBoundingBox
ノードの境界ボックスを取得します。
getConnectedNodes
特定のノードに直接接続しているすべてのノードのnodeIdの配列を取得します。
getConnectedEdges
特定のノードに接続しているエッジのedgeIdの配列を取得します。
メソッド名
説明
startSimulation
物理シミュレーションを開始します。
stopSimulation
物理シミュレーションを停止します。
stabilize
手動で安定化を実行します。
メソッド名
説明
getSelectedNodes
選択されたノードのnodeIdの配列を取得します。
getSelectedEdges
選択されたエッジのedgeIdの配列を取得します。
getPointer
指定した座標に存在するノードのnodeIdを返します。
getEdgeAt
指定した座標に存在するエッジのedgeIdを返します。
selectNodes
指定したノードの選択状態を設定します。
selectEdges
指定したエッジの選択状態を設定します。
setSelection
選択状態を設定します。
unselectAll
すべてのオブジェクトの選択を解除します。
メソッド名
説明
getScale
現在のズームレベルを取得します。
getCentralFocus
現在のビューの中心点を取得します。
fit
すべてのノードがキャンバスに収まるようにズームします。オプションを指定して動作をカスタマイズできます。
focusOnNode
指定したノードにフォーカスを当てます。オプションを指定して動作をカスタマイズできます。
moveTo
カメラをアニメーションや移動に使用します。オプションを指定して動作をカスタマイズできます。
メソッド名
説明
getOptionsFromConfigurator
設定モジュールを使用する場合、ユーザーの操作によって生じたデフォルトオプションからのすべての違いを含むオプションオブジェクトを取得できます。
メソッド名
説明
joinCondition
クラスタ関数に渡されるノードのデータを基に、ノードをクラスタに追加するかどうかを判定する関数です。
processProperties
新しいクラスタノードを作成する前に、指定したプロパティ、すべての含まれるノード、および含まれるエッジとともに呼び出されるオプションの関数です。これを使用して、クラスタが含むアイテムに基づいてクラスタのプロパティを更新することができます。関数はクラスタノードの作成に使用するプロパティを返さなければなりません。
clusterNodeProperties
クラスタノードのオプションを含むオブジェクトです。ノードモジュールで説明されているすべてのオプションが許可されます。これにより、クラスタノードのスタイルを自由に設定することができます。デフォルトのノードオプションが使用されます。未定義の場合は、デフォルトのノードオプションが使用されます。
clusterEdgeProperties
クラスタに接続されたエッジのオプションを含むオブジェクトです。エッジモジュールで説明されているすべてのオプションが許可されます。これにより、クラスタに接続されたエッジのスタイルを自由に設定することができます。提供されていない場合、置き換えられたエッジのオプションが使用されます。未定義の場合は、デフォルトのエッジオプションが使用されます。
イベント名
プロパティ
説明
click
nodes, edges, event, pointer
ユーザーがマウスをクリックまたはタッチしたときに発生するイベントです。オブジェクトとして、選択されたノードとエッジのID、クリックイベント、ポインタの座標が渡されます。
doubleClick
同じ as click
ユーザーがマウスをダブルクリックまたはタッチしたときに発生するイベントです。ダブルクリックは実際には2回のクリックであり、2回のクリックイベントの後にダブルクリックイベントが発生します。
oncontext
同じ as click
ユーザーがキャンバスを右クリックしたときに発生するイベントです。右クリックはデフォルトでは選択しませんが、getNodeAtメソッドを使用してノードを選択することができます。
hold
同じ as click
ユーザーがマウスをクリック＆ホールドまたはタップ＆ホールドしたときに発生するイベントです。この場合もクリックイベントが発生します。
release
同じ as click
描画が完了した後に発生するイベントです。ネットワークの上に描画するために使用することができます。
select
同じ as click
ユーザーの操作によって選択が変更されたときに発生するイベントです。ノードやエッジが選択されたり、選択に追加されたり、選択が解除されたりします。
selectNode
同じ as click
ユーザーがノードを選択したときに発生するイ
selectEdge
同じ as click
ユーザーがエッジを選択したときに発生するイベントです。
deselectNode
nodes, edges, event, pointer, previousSelection
ユーザーがノード（または複数のノード）の選択を解除したときに発生するイベントです。前の選択状態として、直前のユーザーイベントの時点で選択されていたノードとエッジのリストが渡されます。
deselectEdge
同じ as deselectNode
ユーザーがエッジ（または複数のエッジ）の選択を解除したときに発生するイベントです。前の選択状態として、直前のユーザーイベントの時点で選択されていたノードとエッジのリストが渡されます。
dragStart
同じ as click
ドラッグを開始したときに発生するイベントです。
dragging
同じ as click
ノードやビューをドラッグしているときに発生するイベントです。
dragEnd
同じ as click
ドラッグが終了したときに発生するイベントです。
controlNodeDragging
nodes, edges, event, pointer, controlEdge
コントロールノードをドラッグしているときに発生するイベントです。コントロールエッジはドラッグされており、「from」と「to」のノードのIDを含んでいます。コントロールノードが他のノード上でドラッグされていない場合、「to」フィールドは未定義です。
controlNodeDragEnd
同じ as controlNodeDragging
コントロールノードのドラッグが終了したときに発生するイベントです。
hoverNode
{node: nodeId}
オプションのinteraction:{hover:true}が有効であり、マウスがノード上にある場合に発生するイベントです。
blurNode
{node: nodeId}
オプションのinteraction:{hover:true}が有効であり、マウスが前にホバーしていたノードから離れた場合に発生するイベントです。
hoverEdge
{edge: edgeId}
オプションのinteraction:{hover:true}が有効であり、マウスがエッジ上にある場合に発生するイベントです。
blurEdge
{edge: edgeId}
オプションのinteraction:{hover:true}が有効であり、マウスが前にホバーしていたエッジから離れた場合に発生するイベントです。
zoom
direction, scale, pointer
ユーザーがズームインまたはズームアウトしたときに発生するイベントです。プロパティにはズームの方向、スケール、およびポインタの情報が含まれます。
showPopup
ポップアップに対応するアイテムのID
ポップアップ（ツールチップ）が表示されたときに発生するイベントです。
hidePopup
なし
ポップアップ（ツールチップ）が非表示になったときに発生するイベントです。
startStabilizing
なし
スタビライズが開始されたときに発生するイベントです。ドラッグ操作などで物理シミュレーションが再開される場合も含まれます。
stabilizationProgress
iterations, total
定期的な更新間隔の数倍のイテレーションが実行されたときに発生するイベントです。これは「hidden」スタビライズ時にのみ発生します。
stabilizationIterationsDone
なし
「hidden」スタビライズが終了したときに発生するイベントです。ネットワークの安定化を意味するわけではなく、オプションで定義されたイテレーション数に到達したことを示す場合もあります。
stabilized
iterations
ネットワークが安定化したとき、またはstopSimulation()が呼び出されたときに発生するイベントです。イテレーションの数は、ネットワークの安定化に必要な最大イテレーション数を調整するために使用できます。
resize
width, height, oldWidth, oldHeight
キャンバスのサイズが再設定されたときに発生するイベントです。新しい幅と高さ、および以前の幅と高さの情報が渡されます。
initRedraw
なし
再描画が開始される前に発生するイベントです。シミュレーションステップが完了しています。
beforeDrawing
canvas context
キャンバスがクリアされ、表示位置にスケーリングおよび変換された後、すべてのエッジとノードが描画される前に発生するイベントです。
afterDrawing
canvas context
キャンバス上の描画が完了した後に発生するイベントです。ネットワークの
animationFinished
なし
アニメーションが終了したときに発生するイベントです。
configChange
options
ユーザーが設定変更を行ったときに発生するイベントです。オプションオブジェクトはsetOptionsメソッドで使用するか、JSON.stringify()を使用して文字列化することができます。オプションは手動でネットワークに追加する必要はありません。自動的に行われます。このイベントを使用してユーザーのオプションをデータベースに保存することができます。
// these are all options in full.
var options = {
configure: {
enabled: true,
filter: 'nodes,edges',
container: undefined,
showButton: true
}
}
network.setOptions(options);
名前
タイプ
デフォルト値
説明
enabled
ブール値
true
設定インターフェースをオンまたはオフに切り替えます。これはオプションのパラメータです。未定義のままで、このオブジェクトの他のプロパティのいずれかが定義されている場合、これはtrueに設定されます。
filter
文字列、配列、ブール値、関数
true
ブール値の場合、trueはすべてのオプションを表示し、falseは表示しません。文字列が指定された場合、以下の組み合わせが許可されます：nodes、edges、layout、interaction、manipulation、physics、selection、renderer。 関数を提供する場合、2つの引数を受け取ります。オプションとオプションがoptionsオブジェクト内のパスです。関数がtrueを返すと、オプションが構成可能なものとして表示されます。
container
DOM要素
未定義
設定リストをネットワークの下ではなく、別のHTMLコンテナに配置することができます。
showButton
ブール値
true
設定インターフェースの下部にオプションの生成ボタンを表示します。
// these are all options in full.
var options = {
edges:{
arrows: {
to: {
enabled: false,
imageHeight: undefined,
imageWidth: undefined,
scaleFactor: 1,
src: undefined,
type: "arrow"
},
middle: {
enabled: false,
imageHeight: 32,
imageWidth: 32,
scaleFactor: 1,
src: "https://visjs.org/images/visjs_logo.png",
type: "image"
},
from: {
enabled: false,
imageHeight: undefined,
imageWidth: undefined,
scaleFactor: 1,
src: undefined,
type: "arrow"
}
},
endPointOffset: {
from: 0,
to: 0
},
arrowStrikethrough: true,
chosen: true,
color: {
color:'#848484',
highlight:'#848484',
hover: '#848484',
inherit: 'from',
opacity:1.0
},
dashes: false,
font: {
color: '#343434',
size: 14, // px
face: 'arial',
background: 'none',
strokeWidth: 2, // px
strokeColor: '#ffffff',
align: 'horizontal',
multi: false,
vadjust: 0,
bold: {
color: '#343434',
size: 14, // px
face: 'arial',
vadjust: 0,
mod: 'bold'
},
ital: {
color: '#343434',
size: 14, // px
face: 'arial',
vadjust: 0,
mod: 'italic',
},
boldital: {
color: '#343434',
size: 14, // px
face: 'arial',
vadjust: 0,
mod: 'bold italic'
},
mono: {
color: '#343434',
size: 15, // px
face: 'courier new',
vadjust: 2,
mod: ''
}
},
hidden: false,
hoverWidth: 1.5,
label: undefined,
labelHighlightBold: true,
length: undefined,
physics: true,
scaling:{
min: 1,
max: 15,
label: {
enabled: true,
min: 14,
max: 30,
maxVisible: 30,
drawThreshold: 5
},
customScalingFunction: function (min,max,total,value) {
if (max === min) {
return 0.5;
}
else {
var scale = 1 / (max - min);
return Math.max(0,(value - min)*scale);
}
}
},
selectionWidth: 1,
selfReferenceSize: 20,
selfReference:{
size: 20,
angle: Math.PI / 4,
renderBehindTheNode: true
},
shadow:{
enabled: false,
color: 'rgba(0,0,0,0.5)',
size:10,
x:5,
y:5
},
smooth: {
enabled: true,
type: "dynamic",
roundness: 0.5
},
title:undefined,
value: undefined,
width: 1,
widthConstraint: false
}
}
network.setOptions(options);
名前
タイプ
デフォルト値
説明
arrows.to
オブジェクトまたはブール値
オブジェクト
true の場合、エッジの「to」側に矢印が描かれ、デフォルト設定で「to」ノードを指します。矢印のサイズをカスタマイズするには、オブジェクトを指定します。
arrows.to.enabled
ブール値
false
矢印をオンまたはオフに切り替えます。このオプションは任意です。未定義の場合、scaleFactor プロパティが設定されている場合、enabled は true に設定されます。
arrows.to.imageHeight
数値
未定義
画像矢印の高さです。定義されていない場合、画像ファイルの高さが使用されます。
arrows.to.imageWidth
数値
未定義
画像矢印の幅です。定義されていない場合、画像ファイルの幅が使用されます。
arrows.to.scaleFactor
数値
1
スケールファクターは、矢印のサイズを変更するためのものです。
arrows.to.src
文字列
未定義
画像矢印の URL です。
arrows.to.type
文字列
arrow
端点のタイプです。可能な値は、arrow、bar、circle、image です。デフォルトは arrow です。
arrows.middle
オブジェクトまたはブール値
オブジェクト
'to' オブジェクトと似ていますが、エッジの中央に矢印があります。矢印の方向は、arrows.middle.scaleFactor の負の値を使用して反転させることができます。
arrows.from
オブジェクトまたはブール値
オブジェクト
'to' オブジェクトとまったく同じですが、エッジの from ノードに矢印があります。
endPointOffset.from
数値
0
負の数値は、エンドポイントをノードの中点に近づけ、正の数値は逆の効果があります。
endPointOffset.to
数値
0
負の数値は、エンドポイントをノードの中点に近づけ、正の数値は逆の効果があります。
arrowStrikethrough
ブール値
true
false の場合、矢印でエッジが終わります。これは、太い線を使用して矢印をポイントで終了させたい場合に便利です。ただし、中央の矢印はこれに影響を受けません。
chosen.edge
関数またはブール値
未定義
true の場合、エッジを選択したりホバーしたりすると、デフォルトに基づいて特性が変更されます。false の場合、エッジが選択されたときにエッジに変更は加えられません。関数が指定されている場合、エッジが選択されたときに呼び出されます。
chosen.label
関数またはブール値
未定義
true の場合、エッジを選択したりホバーしたりすると、ラベルの特性がデフォルトに基づいて変更されます。false の場合、エッジのラベルが選択されたときに変更されません。関数が指定されている場合、エッジが選択されたときに呼び出されます。
color.color
文字列
'#848484'
選択されたりホバーされないときのエッジの色（インタラクションモジュールでホバーが有効になっている場合）
color.highlight
文字列
'#848484'
エッジが選択されたときの色です。
color.hover
文字列
'#848484'
マウスがエッジにホバーしたときの色です（インタラクションモジュールでホバーが有効になっている場合）
color.inherit
文字列またはブール値
'from'
color、highlight、または hover が定義されている場合、inherit は false に設定されます！ サポートされているオプションは: true、false、'from'、'to'、'both' です。 デフォルト値は 'from' で、true と同じです: エッジは 'from' 側のノードの境界線から色を継承します。
color.opacity
数値
1.0
手動ですべての色を変更せずにエッジの不透明度を設定するのに便利です。不透明度オプションは、すべての色（inherit を使用している場合も）を指定された不透明度に従って調整します。不透明度オプションの許容範囲は0から1です。これは一度だけ行われるため、パフォーマンスへの影響は大きくありません。
dashes
配列またはブール値
false
true の場合、エッジは破線として描画されます。配列を指定して破線をカスタマイズすることもできます。配列の形式は次のとおりです。配列は数値、ギャップの長さ、ダッシュの長さ、ギャップの長さ、ダッシュの長さ... などです。配列は距離が埋まるまで繰り返されます。ただし、IE のバージョン11より古いバージョンでは、破線は直線で描画されます。
font.color
文字列
'#343434'
ラベルテキストの色です。
font.size
数値
14
ラベルテキストのサイズです。
font.face
文字列
'arial'
ラベルテキストのフォントフェイス（またはフォントファミリー）です。
font.background
文字列
未定義
定義されている場合、背景に指定された色の矩形がラベルの後ろに描画されます。
font.strokeWidth
数値
2
テキストの周りにストロークを描画する場合の代替オプションです。値が0より大きい場合、ストロークが描画されます。
font.strokeColor
文字列
'#ffffff'
ストロークの色です。ストロークの値が0より大きい場合に適用されます。
font.align
文字列
'horizontal'
可能なオプション: 'horizontal'、'top'、'middle'、'bottom'。アラインメントは、ラベルがエッジに対してどのように配置されるかを決定します。デフォルト値の horizontal では、エッジの方向に関係なくラベルが水平に配置されます。horizontal 以外のオプションが選択されると、ラベルはエッジに応じて自動的に配置されます。
font.vadjust
数値
0
ラベルテキストのベースフォントの垂直位置のフォント固有の補正です。（正の値は下方向）
font.multi
ブール値または文字列
false
false の場合、ラベルはベースフォントで描かれる純粋なテキストとして扱われます。true または 'html' の場合、ラベルはマルチフォントであり、太字、斜体、コードのマークアップが解釈された HTML として処理されます。値が
font.multi
ブール値または文字列
false
ラベルがベースフォントで描画される場合はfalseです。trueまたは 'html' の場合、ラベルはボールド、イタリック、コードのマークアップが可能で、HTMLとして解釈されます。値が 'markdown' または 'md' の場合、ラベルはボールド、イタリック、コードのマークアップが可能で、マークダウンとして解釈されます。ボールド、イタリック、ボールドイタリック、モノスペースのフォントは、それぞれfont.bold、font.ital、font.boldital、font.monoのプロパティで設定することができます。
font.bold.color
文字列
'#343434'
ラベルテキストの太字フォントの色です。ベースフォントの色をデフォルト値として使用します。
font.bold.size
数値
14
ラベルテキストの太字フォントのサイズです。ベースフォントのサイズをデフォルト値として使用します。
font.bold.face
文字列
'arial'
ラベルテキストの太字フォントのフォントフェイス（またはフォントファミリ）です。ベースフォントのフォントフェイスをデフォルト値として使用します。
font.bold.mod
文字列
'bold'
ラベルテキストの太字フォントを決定する際にフォントフェイスとサイズに追加される文字列です。
font.bold.vadjust
数値
0
ラベルテキストの太字フォントの垂直位置調整です。（正の値は下方向です。）ベースフォントのvalignをデフォルト値として使用します。
font.ital.color
文字列
'#343434'
ラベルテキストのイタリックフォントの色です。ベースフォントの色をデフォルト値として使用します。
font.ital.size
数値
14
ラベルテキストのイタリックフォントのサイズです。ベースフォントのサイズをデフォルト値として使用します。
font.ital.face
文字列
'arial'
ラベルテキストのイタリックフォントのフォントフェイス（またはフォントファミリ）です。ベースフォントのフォントフェイスをデフォルト値として使用します。
font.ital.mod
文字列
'italic'
ラベルテキストのイタリックフォントを決定する際にフォントフェイスとサイズに追加される文字列です。
font.ital.vadjust
数値
0
ラベルテキストのイタリックフォントの垂直位置調整です。（正の値は下方向です。）ベースフォントのvalignをデフォルト値として使用します。
font.boldital.color
文字列
'#343434'
ラベルテキストの太字イタリックフォントの色です。ベースフォントの色をデフォルト値として使用します。
font.boldital.size
数値
14
ラベルテキストの太字イタリックフォントのサイズです。ベースフォントのサイズをデフォルト値として使用します。
font.boldital.face
文字列
'arial'
ラベルテキストの太字イタリックフォントのフォントフェイス（またはフォントファミリ）です。ベースフォントのフォントフェイスをデフォルト値として使用します。
font.boldital.mod
文字列
'bold'
ラベルテキストの太字イタリックフォントを決定する際にフォントフェイスとサイズに追加される文字列です。
font.boldital.vadjust
数値
0
ラベルテキストの太字イタリックフォントの垂直位置調整です。（正の値は下方向です。）ベースフォントのvalignをデフォルト値として使用します。
font.mono.color
文字列
'#343434'
ラベルテキストのモノスペースフォントの色です。ベースフォントの色をデフォルト値として使用します。
font.mono.size
数値
15
ラベルテキストのモノスペースフォントのサイズです。ベースフォントのサイズをデフォルト値として使用します。
font.mono.face
文字列
'courier new'
ラベルテキストのモ
font.mono.mod
文字列
''
ラベルテキストのモノスペースフォントを決定する際にフォントフェイスとサイズに追加される文字列です。
font.mono.vadjust
数値
2
ラベルテキストのモノスペースフォントの垂直位置調整です。（正の値は下方向です。）ベースフォントのvalignをデフォルト値として使用します。
from
数値または文字列
エッジは2つのノード間で接続されており、1つはfromノードを定義します。対応するノードIDを指定する必要があります。これは個々のエッジにのみ適用されます。
hidden
ブール値
false
trueの場合、エッジは描画されませんが、物理シミュレーションの一部となります。
hoverWidth
数値または関数
0.5
インタラクションモジュールでホバー動作が有効になっている場合、ユーザーがマウスでエッジにホバーする際のエッジの幅を決定します。数値が指定された場合、この数値が幅に追加されます。幅は値とスケーリング関数によって変更されるため、定数の乗算子や追加値は最適な結果を得られない場合があります。そのため、関数を指定することができます。例： この関数はエッジの幅の数値を受け取ります。この単純な例では、幅に1を追加しています。関数内のロジックは任意の形にカスタマイズできますが、数値を返す必要があります。
id
文字列
undefined
エッジのIDです。エッジにはオプションです。指定されていない場合、エッジにはUUIDが割り当てられます。これは個々のエッジにのみ適用されます。
label
文字列
undefined
エッジのラベルです。HTMLは使用できません。ネットワークはHTML5キャンバスを使用します。
labelHighlightBold
ブール値
true
エッジが選択されたときにラベルが太字になるかどうかを決定します。
length
数値
undefined
物理シミュレーションによってエッジにスプリングの長さが与えられます。この値はスプリングの長さを上書きすることができます。
physics
ブール値
true
trueの場合、エッジは物理シミュレーションの一部となります。falseの場合、スプリングとしては機能しません。
scaling.min
数値
1
エッジに値がある場合、その幅は値、スケーリング関数、最小値と最大値によって決まります。最小値は許容される最小値です。
scaling.max
数値
15
オプションでvalueを使用してエッジの幅をスケーリングする場合の最大許容幅です。
scaling.label
オブジェクトまたはブール値
オブジェクト
falseの場合、ラベルはエッジと共にスケーリングされません。trueの場合、デフォルト設定を使用してスケーリングされます。さらなるカスタマイズのために、オブジェクトを指定することもできます。
scaling.label.enabled
ブール値
false
ラベルのスケーリングをオンまたはオフに切り替えます。このオプションが定義されていない場合、このオブジェクトのプロパティのいずれかが定義されている場合はtrueに設定されます。
scaling.label.min
数値
14
スケーリング時に使用されるラベルの最小フォントサイズです。
scaling.label.max
数値
30
スケーリング時に使用されるラベルの最大フォントサイズです。
scaling.label.maxVisible
数値
30
ズームインするとフォントも大きく描画されます。このオプションを使用して認識されるフォントサイズを制限できます。30に設定すると、フォントは100％のズームでサイズ30より大きく表示されません。
scaling.label.drawThreshold
数値
5
ズームアウトすると、フォントサイズが小さく描画されます。フォントが描画される下限を定義します。フォントスケーリングを使用する場合、maxVisibleと組み合わせて、ズームアウト時に重要なエッジのラベルのみを表示し、ズームイン時に残りのラベルの表示を行うことができます。
scaling.customScalingFunction
関数
詳細に記載あり
エッジに値フィールドがある場合、この関数はノードのサイズを値に基づいてスケーリングする方法を決定します。
selectionWidth
数値または関数
1
エッジが選択されたときのエッジの幅を決定します。数値が指定された場合、この数値が幅に追加されます。幅は値とスケーリング関数によって変更されるため、定数の乗算子や追加値は最適な結果を得られない場合があります。そのため、関数を指定することができます。
selfReferenceSize
数値
false
toノードとfromノードが同じ場合、円が描画されます。これはその円の半径です。このプロパティは非推奨であり、代わりにselfReferenceを使用してください。
selfReference.size
数値
20
円の半径です。
selfReference.angle
数値
π / 4
位置を示す角度（ラジアンで指定）です。位置が指定されていない場合、右上の角（π / 4）になります。
selfReference.renderBehindTheNode
ブール値
true
セルフリファレンス円を完全な円として描画するか、親ノードと重ならないようにするかを示すフラグです。
shadow.enabled
ブール値
false
影のキャスティングを切り替えます。このオプションが定義されていない場合、このオブジェクトのいずれかのプロパティが定義されている場合はtrueに設定されます。
shadow.color
文字列
'rgba(0,0,0,0.5)'
影の色を示す文字列です。サポートされる形式は 'rgb(255,255,255)'、'rgba(255,255,255,1)'、'#FFFFFF' です。
shadow.size
数値
10
影のぼかしサイズです。
shadow.x
数値
5
Xオフセットです。
shadow.y
数値
5
Yオフセットです。
smooth.enabled
ブール値
true
スムーズなカーブをオンまたはオフに切り替えます。これはオプションのオプションです。このオブジェクトの他のプロパティのいずれかが設定されている場合、このオプションはtrueに設定されます。
smooth.type
文字列
'dynamic'
可能なオプション：'dynamic'、'continuous'、'discrete'、'diagonalCross'、'straightCross'、'horizontal'、'vertical'、'curvedCW'、'curvedCCW'、'cubicBezier'。これらのどれが最適かを確認するために、この例を参照してください！ dynamicを使用する場合、エッジには形状をガイドする見えないサポートノードがあります。このノードは物理シミュレーションの一部です。
smooth.forceDirection
文字列またはブール値
false
受け入れられるオプション：['horizontal', 'vertical', 'none']。このオプションは、cubicBezier曲線と一緒にのみ使用されます。trueの場合、horizontalが選択され、falseの場合は、より大きい方向（ノード間のx距離とy距離）が使用されます。x距離が大きい場合は水平方向を使用します。これは階層レイアウトで使用することを想定しています。
smooth.roundness
数値
0.5
受け入れられる範囲：0..1.0。このパラメータは、dynamic以外のすべてのタイプのスムーズなカーブの丸みを調整します。
title
文字列または要素
undefined
エッジ上にホバーするとポップアップで表示されるタイトルです。タイトルはHTML要素またはプレーンテキストを含む文字列であることができます。HTMLを解析したい場合は、HTML in titles exampleを参照してください。
to
数値または文字列
エッジは2つのノード間で接続されます。これはtoノードを定義する場所です。対応するノードIDを指定する必要があります。これは個々のエッジにのみ適用されます。
value
数値
undefined
値が設定されている場合、エッジの幅は、scalingオブジェクトで定義されたオプションを使用してスケーリングされます。
width
数値
1
エッジの幅です。valueが設定されている場合、これは使用されません。
widthConstraint.maximum
数値
undefined
数値が指定された場合、エッジのラベルの最大幅がその値に設定されます。エッジのラベルの行はスペースで区切られ、最大値を下回るように分割されます。
var options = {
nodes:{
borderWidth: 1,
borderWidthSelected: 2,
brokenImage:undefined,
chosen: true,
color: {
border: '#2B7CE9',
background: '#97C2FC',
highlight: {
border: '#2B7CE9',
background: '#D2E5FF'
},
hover: {
border: '#2B7CE9',
background: '#D2E5FF'
}
},
opacity: 1,
fixed: {
x:false,
y:false
},
font: {
color: '#343434',
size: 14, // px
face: 'arial',
background: 'none',
strokeWidth: 0, // px
strokeColor: '#ffffff',
align: 'center',
multi: false,
vadjust: 0,
bold: {
color: '#343434',
size: 14, // px
face: 'arial',
vadjust: 0,
mod: 'bold'
},
ital: {
color: '#343434',
size: 14, // px
face: 'arial',
vadjust: 0,
mod: 'italic',
},
boldital: {
color: '#343434',
size: 14, // px
face: 'arial',
vadjust: 0,
mod: 'bold italic'
},
mono: {
color: '#343434',
size: 15, // px
face: 'courier new',
vadjust: 2,
mod: ''
}
},
group: undefined,
heightConstraint: false,
hidden: false,
icon: {
face: 'FontAwesome',
code: undefined,
weight: undefined,
size: 50, //50,
color:'#2B7CE9'
},
image: undefined,
imagePadding: {
left: 0,
top: 0,
bottom: 0,
right: 0
},
label: undefined,
labelHighlightBold: true,
level: undefined,
mass: 1,
physics: true,
scaling: {
min: 10,
max: 30,
label: {
enabled: false,
min: 14,
max: 30,
maxVisible: 30,
drawThreshold: 5
},
customScalingFunction: function (min,max,total,value) {
if (max === min) {
return 0.5;
}
else {
let scale = 1 / (max - min);
return Math.max(0,(value - min)*scale);
}
}
},
shadow:{
enabled: false,
color: 'rgba(0,0,0,0.5)',
size:10,
x:5,
y:5
},
shape: 'ellipse',
shapeProperties: {
borderDashes: false, // only for borders
borderRadius: 6, // only for box shape
interpolation: false, // only for image and circularImage shapes
useImageSize: false, // only for image and circularImage shapes
useBorderWithImage: false, // only for image shape
coordinateOrigin: 'center' // only for image and circularImage shapes
}
size: 25,
title: undefined,
value: undefined,
widthConstraint: false,
x: undefined,
y: undefined
}
}
network.setOptions(options);
以下が要素のテーブル化と日本語化です。
プロパティ
タイプ
デフォルト値
説明
borderWidth
数値
1
ノードの境界の幅です。
borderWidthSelected
数値
2
ノードが選択された場合の境界の幅です。未定義の場合、borderWidth * 2が使用されます。
brokenImage
文字列
未定義
shapeが'image'または'circularImage'に設定されている場合、このオプションはimageオプションで指定されたURLが解決できない場合のバックアップ画像のURLです。
chosen.node
関数またはブール値
未定義
trueの場合、ノードが選択またはホバーされたとき、デフォルトに基づいてその特性が変更されます。falseの場合、ノードが選択された場合にノードに変更は加えられません。関数が指定された場合、ノードが選択されたときに呼び出されます。関数の引数として、values（値のオブジェクト）、id（ノードのID）、selected（選択されたかどうかの状態）、hovering（ホバーしているかどうかの状態）が与えられます。関数内では、任意の引数を使用して特性の変更を決定できます。特定のノードに特定の関数を割り当てることもできますし、ネットワークのノードオプション全体に関数を割り当てることもできます。特性は次のように変更されます：プロパティ-ノードリファレンス。
color.border
文字列
'#2B7CE9'
ノードが選択されていない場合やホバーされていない場合の境界の色です（interactionモジュールでホバーが有効になっている場合）。
color.background
文字列
'#D2E5FF'
ノードが選択されていない場合やホバーされていない場合の背景の色です（interactionモジュールでホバーが有効になっている場合）。
color.highlight
オブジェクトまたは文字列
オブジェクト
ノードが選択された場合の色です。または、単純な文字列のカラー値を指定することもできます。
color.highlight.border
文字列
'#2B7CE9'
ノードが選択された場合の境界の色です。
color.highlight.background
文字列
'#D2E5FF'
ノードが選択された場合の背景の色です。
color.hover
オブジェクトまたは文字列
オブジェクト
マウスがノード上にホバーしたときのノードの色です（interactionモジュールでホバーが有効になっている場合）。上記のような短縮形式もサポートされています。
color.hover.border
文字列
'#2B7CE9'
マウスがノード上にホバーしたときの境界の色です（interactionモジュールでホバーが有効になっている場合）。
color.hover.background
文字列
'#D2E5FF'
マウスがノード上にホバーしたときの背景の色です（interactionモジュールでホバーが有効になっている場合）。
ctxRenderer
関数
未定義
この関数を使用すると、キャンバス上に任意の形状や線を描画できます（形状の描画方法については、こちらのガイドを参照してください）。このプロパティは、shapeが'custom'に設定されている場合のみ使用されます。
opacity
数値
未定義
ノード全体の不透明度です（境界、背景、画像、シャドウの不透明度を上書きします）。
fixed.x
ブール値
false
trueの場合、ノードはX方向に移動しません。
fixed.y
ブール値
false
trueの場合、ノードはY方向に移動しません。
font.color
文字列
'#343434'
ラベルのテキストの色です。
font.size
数値
14
ラベルのテキストのサイズです。
font.face
文字列
'arial'
ラベルのテキストのフォント（またはフォントファミリ）です。
font.background
文字列
未定義
undefinedでない場合、色の文字列が指定されている場合、ラベルの背景に背景の長方形が描画されます。
font.strokeWidth
数値
0
テキストの周りにストロークを描画する場合、値を指定します。0より大きい値が指定された場合、ストロークが描画されます。
font.strokeColor
文字列
'#ffffff'
ストロークが指定された場合のストロークの色です。ストロークの値が0より大きい場合に適用されます。
font.align
文字列
'center'
ラベルのテキストの配置方法を指定します。'left'に設定すると、テキストは左揃えになります。それ以外の場合はデフォルトの'center'になります。
font.vadjust
数値
0
ラベルテキストの基本フォントの垂直位置補正値です（正の値は下方向）。
font.multi
ブール値または文字列
false
falseの場合、ラベルは基本フォントで描画されるテキストとして扱われます。trueまたは'html'の場合、ラベルは太字、斜体、コードのマークアップを持つ複数のフォントで描画されることがあります（htmlとして解釈されます）。値が'markdown'または'md'の場合、ラベルは太字、斜体、コードのマークアップを持つ複数のフォントで描画されることがあります（markdownとして解釈されます）。太字、斜体、太字斜体、等幅フォントは、それぞれfont.bold、font.ital、font.boldital、font.monoプロパティで設定できます。
font.bold.color
文字列
'#343434'
ラベルテキストの太字フォントの色です。基本フォントの色がデフォルト値として使用されます。
font.bold.size
数値
14
ラベルテキストの太字フォントのサイズです。基本フォントのサイズがデフォルト値として使用されます。
font.bold.face
文字列
'arial'
ラベルテキストの太字フォントのフォント（またはフォントファミリ）です。基本フォントのフォントがデフォルト値として使用されます。
font.bold.mod
文字列
'bold'
ラベルテキストの太字フォントを決定する際に、faceとsizeに追加される文字列です。
font.bold.vadjust
数値
0
ラベルテキストの太字フォントの垂直位置補正値です（正の値は下方向）。基本フォントのvalignがデフォルト値として使用されます。
font.ital.color
文字列
'#343434'
ラベルテキストの斜体フォントの色です。基本フォントの色がデフォルト値として使用されます。
font.ital.size
数値
14
ラベルテキストの斜体フォントのサイズです。基本フォントのサイズがデフォルト値として使用されます。
font.ital.face
文字列
'arial'
ラベルテキストの斜体フォントのフォント（またはフォントファミリ）です。基本フォントのフォントがデフォルト値として使用されます。
font.ital.mod
文字列
'italic'
ラベルテキストの斜体フォントを決定する際に、faceとsizeに追加される文字列です。
font.ital.vadjust
数値
0
ラベルテキストの斜体フォントの垂直位置補正値です（正の値は下方向）。基本フォントのvalignがデフォルト値として使用されます。
font.boldital.color
文字列
'#343434'
ラベルテキストの太字斜体フォントの色です。基本フォントの色がデフォルト値として使用されます。
font.boldital.size
数値
14
ラベルテキストの太字斜体フォントのサイズです。基本フォントのサイズがデフォルト値として使用されます。
font.boldital.face
文字列
'arial'
ラベルテキストの太字斜体フォントのフォント（またはフォントファミリ）です。基本フォントのフォントがデフォルト値として使用されます。
font.boldital.mod
文字列
'bold'
ラベルテキストの太字斜体フォントを決定する際に、faceとsizeに追加される文字列です。
font.boldital.vadjust
数値
0
ラベルテキストの太字斜体フォントの垂直位置補正値です（正の値は下方向）。基本フォントのvalignがデフォルト値として使用されます。
font.mono.color
文字列
'#343434'
ラベルテキストの等幅フォントの色です。基本フォントの色がデフォルト値として使用されます。
font.mono.size
数値
15
ラベルテキストの等幅フォントのサイズです。基本フォントのサイズがデフォルト値として使用されます。
font.mono.face
文字列
'courier new'
ラベルテキストの等幅フォントのフォント（またはフォントファミリ）です。
font.mono.mod
文字列
''
ラベルテキストの等幅フォントを決定する際に、faceとsizeに追加される文字列です。
font.mono.vadjust
数値
2
ラベルテキストの等幅フォントの垂直位置補正値です（正の値は下方向）。基本フォントのvalignがデフォルト値として使用されます。
group
文字列
未定義
未定義でない場合、ノードは指定されたグループに属します。そのグループのスタイル情報がこのノードに適用されます。ノード固有のスタイル設定はグループのスタイル設定を上書きします。
heightConstraint.minimum
数値
未定義
数値が指定された場合、ノードの最小の高さがその値に設定されます。ノードの高さが最小値よりも小さい場合、高さは最小値に設定されます。
heightConstraint.valign
文字列
'middle'
有効な値は 'top'、'middle'、'bottom' です。指定された場合、ラベルテキストの高さが最小値（上下のマージンを含む）よりも小さい場合、指定された位置に垂直方向にオフセットされます。
hidden
ブール値
false
trueの場合、ノードは表示されません。ただし、物理シミュレーションの一部としては機能します！
icon.face
文字列
'FontAwesome'
これらのオプションは、shapeがiconに設定されている場合にのみ使用されます。faceオプションの可能な値は、'FontAwesome'や'Ionicons'など、ページにロードされたフォントのいずれかです。
icon.code
文字列
未定義
アイコンのコードです。例えば、'\uf007'です。
icon.size
数値
50
アイコンのサイズです。
icon.color
文字列
'#2B7CE9'
アイコンの色です。
icon.weight
数値または文字列
未定義
選択状態に関係なくウェイトを強制することができます。例えば、Font Awesome 5では、ウェイトを'bold'または700に強制しないと正常に機能しません。このオプションが設定された場合、選択は太字の代わりにサイズが大きく表示されます。
id
数値または文字列
未定義
ノードのIDです。ノードにはIDが必須であり、ユニークである必要があります。これは個々のノードごとに設定する必要があります。グローバルではないことに注意してください。
image.unselected
文字列
未定義
選択されていない（デフォルト）画像のURL。
image.selected
文字列
未定義
選択された画像のURL。
imagePadding.top
数値
0
形状内の画像の上部パディングがこの値に設定されます。
imagePadding.right
数値
0
形状内の画像の右マージンがこの値に設定されます。
imagePadding.bottom
数値
0
形状内の画像の下マージンがこの値に設定されます。
imagePadding.left
数値
0
形状内の画像の左マージンがこの値に設定されます。
label
文字列
未定義
ラベルはノード内またはノードの下に表示されるテキストの部分です（形状に応じて異なります）。
labelHighlightBold
ブール値
true
ノードが選択された場合、ラベルが太字になるかどうかを決定します。
level
数値
未定義
階層レイアウトを使用している場合、レベルはノードの位置を決定します。
margin.top
数値
5
ラベルの上部マージンがこの値に設定されます。
margin.right
数値
5
ラベルの右マージンがこの値に設定されます。
margin.bottom
数値
5
ラベルの下マージンがこの値に設定されます。
margin.left
数値
5
ラベルの左マージンがこの値に設定されます。
mass
数値
1
barnesHut物理モデル（デフォルトで有効）は、逆重力モデルに基づいています。ノードの質量を増やすと、反発力が増します。
physics
ブール値
true
falseの場合、ノードは物理シミュレーションの一部ではありません。手動でドラッグする以外は移動しません。
scaling.min
数値
10
ノードに値がある場合、その値、スケーリング関数、最小値、最大値のオプションを使用してノードのサイズが決まります。最小値は許容される最小値です。
scaling.max
数値
30
ノードのサイズが値オプションを使用してスケーリングされる場合、これが設定された最大の許容サイズです。
scaling.label
オブジェクトまたはブール値
オブジェクト
ラベルがノードとともにスケーリングするかどうかを決定します。カスタマイズするために、オブジェクトを提供できます。
scaling.label.enabled
ブール値
false
ラベルのスケーリングをオンまたはオフに切り替えます。このオプションが定義されていない場合、このオブジェクトのいずれかのプロパティが定義されている場合、値はtrueに設定されます。
scaling.label.min
数値
14
スケーリング時のラベルの最小フォントサイズです。
scaling.label.max
数値
30
スケーリング時のラベルの最大フォントサイズです。
scaling.label.maxVisible
数値
30
ズームインすると、フォントも大きく表示されます。このオプションを使用して、知覚されるフォントサイズを制限できます。30に設定されている場合、100%でズームインしてもフォントはサイズ30より大きくなりません。
scaling.label.drawThreshold
数値
5
ズームアウトすると、フォントは小さく表示されます。このオプションは、フォントが表示される下限を定義します。フォントスケーリングを使用する場合、maxVisibleとともに使用して、ズームアウト時に重要なノードのラベルを最初に表示し、ズームイン時に残りのラベルを表示することができます。
scaling.customScalingFunction
関数
説明に記載あり
ノードに値フィールドがある場合、この関数は値に基づいてノードのサイズをスケーリングする方法を決定します。デフォルトの関数は次のとおりです。
shadow.enabled
ブール値
false
影のキャスティングを切り替えます。このオプションが定義されていない場合、このオブジェクトのいずれかのプロパティが定義されている場合、値はtrueに設定されます。
shadow.color
文字列
'rgba(0,0,0,0.5)'
影の色、文字列形式で指定されます。サポートされている形式は 'rgb(255,255,255)', 'rgba(255,255,255,1)', '#FFFFFF' です。
shadow.size
Number
10
影のぼかしサイズです。
shadow.x
Number
5
X方向のオフセットです。
shadow.y
Number
5
Y方向のオフセットです。
shape
String
'ellipse'
ノードの見た目を定義します。ラベルが内部にあるタイプとラベルが下部にあるタイプの2つのタイプがあります。3番目のタイプは、ノードを表すために独自の形状を描画できるカスタムシェイプです。
shapeProperties.borderDashes
Array or Boolean
false
ボーダーを持つすべての形状に適用されるプロパティです。配列を提供してダッシュを設定します。配列形式: [ダッシュの長さ, ギャップの長さ]。またはブール値を使用できます。falseは無効化、trueはデフォルト値 [5,15] です。
shapeProperties.borderRadius
Number
6
ボックス形状にのみ使用されるプロパティで、形状の角の丸みを決定します。
shapeProperties.interpolation
Boolean
true
このプロパティは画像とcircularImageの形状にのみ適用されます。trueの場合、画像はスケーリングダウン時にリサンプリングされ、計算時間の犠牲を払ってより良い画像が生成されます。
shapeProperties.useImageSize
Boolean
false
このプロパティは画像とcircularImageの形状にのみ適用されます。falseの場合、サイズオプションが使用され、trueの場合は画像のサイズが使用されます。重要: trueに設定されている場合、valueオプションで画像のサイズをスケーリングすることはできません！
shapeProperties.useBorderWithImage
Boolean
false
このプロパティはimage形状にのみ適用されます。trueの場合、カラーオブジェクトが使用されます。背景色の矩形が背後に描画され、ボーダーがあります。つまり、すべてのボーダーオプションが考慮されます。
shapeProperties.coordinateOrigin
String
'center'
このプロパティはimageとcircularImageの形状にのみ適用されます。ノードの(x, y)が画像の中心か左上隅かを決定します。
size
Number
25
サイズはラベルが内部にないノード形状のサイズを決定するために使用されます。これらの形状には以下が含まれます: image、circularImage、diamond、dot、star、triangle、triangleDown、hexagon、square、icon。
title
String or Element
undefined
ユーザーがノード上にホバーしたときに表示されるポップアップのタイトルです。タイトルはHTML要素またはプレーンテキストの文字列であることができます。HTMLを解析したい場合は、HTML in titlesの例を参照してください。
value
Number
undefined
値が設定されている場合、ノードは上記で定義されたスケーリングオプションを使用してスケーリングされます。
widthConstraint.minimum
Number
undefined
数値が指定されている場合、ノードの最小幅がその値に設定されます。ノードの幅が値より小さい場合、幅は最小値に設定されます。
widthConstraint.maximum
Number
undefined
数値が指定されている場合、ノードの最大幅がその値に設定されます。ノードのラベルの行は最大値を下回るようにスペースで分割されます。
x
Number
undefined
X軸上のノードの初期位置を指定します。階層レイアウトを使用している場合、この値は効果を持ちません。スタビリゼーションを使用している場合、安定化された位置は初期位置と異なる場合があります（ノードはこの位置から開始しますが、安定化設定に基づいて異なる位置に移動する場合があります）。ノードをこの位置に固定するには、物理エンジンをオフにするか、fixed.xノードオプションをtrueに設定します。
y
Number
undefined
Y軸上のノードの初期位置を指定します。階層レイアウトを使用している場合、この値は効果を持ちません。スタビリゼーションを使用している場合、安定化された位置は初期位置と異なる場合があります（ノードはこの位置から開始しますが、安定化設定に基づいて異なる位置に移動する場合があります）。ノードをこの位置に固定するには、物理エンジンをオフにするか、fixed.yノードオプションをtrueに設定します。
var options = {
groups:{
useDefaultGroups: true,
myGroupId:{
/*node options*/
}
}
}
network.setOptions(options);
Name
Type
Default
Description
useDefaultGroups
Boolean
true
もしノードにGroupsモジュールに定義されていないグループがある場合、モジュールは使用できるグループごとにループし、不明なグループごとに1つを割り当てます。すべてが使用された場合、最初のグループに戻ります。これをfalseに設定すると、このサイクルでデフォルトのグループは使用されません。
group*
Object
特定のグループのサブセットに適用されるスタイル情報を含む複数のグループを追加することができます。ここでノードモジュールで説明されているすべてのオプションが使用できます（同じidやx、y座標を設定することはありません）。
var options = {
layout: {
randomSeed: undefined,
improvedLayout:true,
clusterThreshold: 150,
hierarchical: {
enabled:false,
levelSeparation: 150,
nodeSpacing: 100,
treeSpacing: 200,
blockShifting: true,
edgeMinimization: true,
parentCentralization: true,
direction: 'UD', // UD, DU, LR, RL
sortMethod: 'hubsize', // hubsize, directed
shakeTowards: 'leaves' // roots, leaves
}
}
}
network.setOptions(options);
Name
Type
Default
Description
randomSeed
Number or String
undefined
階層レイアウトを使用しない場合、ノードは最初にランダムに配置されます。つまり、落ち着いた結果は毎回異なります。手動でランダムシードを提供すると、レイアウトは毎回同じになります。理想的には、未定義のシードで試し、レイアウトが満足できるまでリロードし、getSeed()メソッドを使用してシードを確認します。
improvedLayout
Boolean
true
有効にすると、ネットワークは初期レイアウトにKamada Kawaiアルゴリズムを使用します。100以上のノードがあるネットワークでは、クラスタリングが自動的に行われ、ノードの数が減少します。これにより、安定化時間が大幅に改善される場合があります。ネットワークが非常に相互接続されている場合（葉ノードがないかわずかな場合）、これは機能せず、古い方法に戻ります。将来的にはパフォーマンスが改善されます。
clusterThreshold
Number
150
improvedLayoutが適用されるクラスタのしきい値です。
hierarchical.enabled
Boolean
false
階層レイアウトシステムの使用を切り替えます。このオプションが定義されていない場合、このオブジェクトのプロパティのいずれかが定義されている場合はtrueに設定されます。
hierarchical.levelSeparation
Number
150
異なるレベル間の距離です。
hierarchical.nodeSpacing
Number
100
自由軸上のノード間の最小距離です。これは初期レイアウトのみです。物理エンジンを有効にすると、ノード間の距離は有効なノード間の距離になります。
hierarchical.treeSpacing
Number
200
異なるツリー（独立したネットワーク）間の距離です。これは初期レイアウトのみです。物理エンジンを有効にすると、斥力モデルはツリー間の距離を示します。
hierarchical.blockShifting
Boolean
true
空白スペースを減らすためのメソッドです。単独で使用するか、エッジ最小化と併用することができます。各ノードは空白スペースをチェックし、ノードのスペーシングを任意のレベルで尊重しながらそのブランチをできるだけ長くシフトします。これは主に初期レイアウトのためです。物理エンジンを有効にすると、レイアウトは物理エンジンによって決定されます。ただし、安定化時間が大幅に短縮されます！
hierarchical.edgeMinimization
Boolean
true
空白スペースを減らすためのメソッドです。単独で使用するか、ブロックシフトと併用することができます。ブロックシフトを有効にすると、レイアウトプロセスが通常より高速化されます。各ノードは、エッジの総長を減らすために自由軸に沿って移動しようとします。これは主に初期レイアウトのためです。物理エンジンを有効にすると、レイアウトは物理エンジンによって決定されます。ただし、安定化時間が大幅に短縮されます！
hierarchical.parentCentralization
Boolean
true
trueの場合、レイアウトアルゴリズムが完了した後に親ノードが再び中央に配置されます。
hierarchical.direction
String
'UD'
階層レイアウトの方向です。使用可能なオプションは次のとおりです：UD、DU、LR、RL。簡単に説明すると、up-down（上下）、down-up（下上）、left-right（左右）、right-left（右左）です。
hierarchical.sortMethod
String
'hubsize'
データに基づいてノードのレベルを確定するために使用されるアルゴリズムです。可能なオプションは次のとおりです：hubsize、directed。
hierarchical.shakeTowards
String
'roots'
ダイレクトレイアウトの場合
var options = {
interaction:{
dragNodes:true,
dragView: true,
hideEdgesOnDrag: false,
hideEdgesOnZoom: false,
hideNodesOnDrag: false,
hover: false,
hoverConnectedEdges: true,
keyboard: {
enabled: false,
speed: {x: 10, y: 10, zoom: 0.02},
bindToWindow: true,
autoFocus: true,
},
multiselect: false,
navigationButtons: false,
selectable: true,
selectConnectedEdges: true,
tooltipDelay: 300,
zoomSpeed: 1,
zoomView: true
}
}
network.setOptions(options);
Name
Type
Default
Description
dragNodes
Boolean
true
trueの場合、固定されていないノードはユーザーによってドラッグできます。
dragView
Boolean
true
trueの場合、ユーザーはビューをドラッグできます。
hideEdgesOnDrag
Boolean
false
trueの場合、ビューをドラッグしているときにエッジが描画されません。これにより、ドラッグ時の応答性が大幅に向上し、ユーザーエクスペリエンスが向上します。
hideEdgesOnZoom
Boolean
false
trueの場合、ズーム時にエッジが描画されません。これにより、ズーム時の応答性が大幅に向上し、ユーザーエクスペリエンスが向上します。
hideNodesOnDrag
Boolean
false
trueの場合、ビューをドラッグしているときにノードが描画されません。これにより、ドラッグ時の応答性が大幅に向上し、ユーザーエクスペリエンスが向上します。
hover
Boolean
false
trueの場合、ノードはマウスが上に移動するとホバーカラーを使用します。
hoverConnectedEdges
Boolean
true
trueの場合、ノードをホバーすると、接続されているエッジがハイライト表示されます。
keyboard.enabled
Boolean
false
キーボードショートカットの使用を切り替えます。このオプションが定義されていない場合、このオブジェクトのプロパティのいずれかが定義されている場合はtrueに設定されます。
keyboard.speed.x
Number
1
キーを押すかナビゲーションボタンを押すと、ビューがx方向に移動する速度です。
keyboard.speed.y
Number
1
キーを押すかナビゲーションボタンを押すと、ビューがy方向に移動する速度です。
keyboard.speed.zoom
Number
0.02
キーを押すかナビゲーションボタンを押すと、ビューのズームインまたはズームアウト速度です。
keyboard.bindToWindow
Boolean
true
キーボードショートカットをウィンドウにバインドする場合、フォーカスのあるDOMオブジェクトに関係なく機能します。ページに複数のネットワークがある場合、これをfalseに設定して、キーボードショートカットがフォーカスを持つネットワークでのみ機能するようにすることができます。
keyboard.autoFocus
Boolean
true
keyboard.bindToWindow=falseの場合、このオプションを使用して、ホバー時にネットワークを自動的にフォーカスしないようにすることができます。
multiselect
Boolean
false
trueの場合、長押し（またはタッチ）およびコントロールキーを押すことで選択が追加されます。
navigationButtons
Boolean
false
trueの場合、ナビゲーションボタンがネットワークキャンバスに描画されます。これらはHTMLボタンであり、CSSを使用して完全にカスタマイズすることができます。
selectable
Boolean
true
trueの場合、ユーザーはノードとエッジを選択できます。
selectConnectedEdges
Boolean
true
trueの場合、ノードを選択すると、接続されているエッジがハイライト表示されます。
tooltipDelay
Number
300
ノードまたはエッジに'title'フィールドが定義されている場合、ポップアップツールチップとして表示することができます。ツールチップ自体はHTML要素であり、CSSを使用して完全にスタイルを設定することができます。遅延は、ツールチップが表示されるまでのミリ秒数です。
zoomSpeed
Number
1
ズームの速さ/荒さまたは遅さ/精度です。
zoomView
Boolean
true
trueの場合、ユーザーはズームインできます。
var options = {
manipulation: {
enabled: false,
initiallyActive: false,
addNode: true,
addEdge: true,
editNode: undefined,
editEdge: true,
deleteNode: true,
deleteEdge: true,
controlNodeStyle:{
// all node options are valid.
}
}
}
network.setOptions(options);
Name
Type
Default
Description
enabled
Boolean
false
操作システムをオンまたはオフに切り替えます。falseの場合でも、メソッドを介した操作APIは動作します。このプロパティはオプションです。以下のオプションのいずれかを定義し、enabledが未定義の場合、trueに設定されます。
initiallyActive
Boolean
true
ツールバーが最初に表示されるか、最初に編集ボタンのみが表示されるかを切り替えます。
addNode
BooleanまたはFunction
true
特定の機能をオンまたはオフに切り替えるためにこれらのオプションを使用するか、それらにハンドラ関数をアタッチします。これらの関数はアクションが実行される前に呼び出されます。ノードが操作システムを介して追加される場合、最初にaddNode関数が呼び出されます。これにより、ユーザーに対してGUIを提供したり、プロセスを中止したり、他の任意の処理を行ったりすることができます。editNode機能を除くすべての機能では、これらのハンドラ関数はオプションです。ブール値を指定すると、操作システムのGUI上の「ノードの追加」ボタンの切り替えのみが行われます。ハンドリング関数の欠如は、メソッドを使用する場合にAPIに影響を与える可能性があります。関数が指定されている場合、ユーザーが「addNode」モードでキャンバスをクリックしたときに呼び出されます。この関数は2つの変数を受け取ります：作成可能なノードのプロパティとコールバック関数。新しいノードのプロパティをコールバック関数と共に呼び出すと、ノードが追加されます。
addEdge
BooleanまたはFunction
true
ブール値の場合、GUIの「エッジの追加」ボタンの使用可否を切り替えます。メソッドを介したAPIは引き続き機能しますが、（明らかなことですが）ハンドラ関数は存在しません。関数が指定されている場合、ユーザーが「addEdge」モードで新しいエッジを1つのノードから次のノードにドラッグすると呼び出されます。この関数は2つの変数を受け取ります：作成可能なエッジのプロパティとコールバック関数。新しいエッジのプロパティをコールバック関数と共に呼び出すと、エッジが追加されます。
editNode
Function
undefined
ハンドリング関数が提供されていない場合、ノードの編集は無効になります。この関数は、ノードが選択され、ツールバーの「ノードの編集」ボタンが押されたときに呼び出されます。この関数は、addNode関数と同様に、ノードのデータとコールバック関数を受け取ります。
deleteNode
BooleanまたはFunction
true
ブール値の場合、GUIでノードの削除を切り替えます。関数の場合、ノードが選択され、「選択したノードを削除」ボタンが押されたときに呼び出されます。関数を使用する場合、コールバックと、選択されたノードIDの配列と選択されたエッジIDの配列を含むオブジェクトが渡されます。コールバックが実行されれば、これらのアイテムが削除されます。
deleteEdge
BooleanまたはFunction
true
ブール値の場合、GUIでエッジの削除を切り替えます。関数の場合、エッジが選択され、「選択したエッジを削除」ボタンが押されたときに呼び出されます。関数を使用する場合、コールバックと、選択されたノードIDの配列（空）と選択されたエッジIDの配列を含むオブジェクトが渡されます。コールバックが実行されれば、これらのアイテムが削除されます。
controlNodeStyle
Object
Object
任意のスタイリング情報をここに指定できます。ノードモジュールで説明されているすべてのフィールドが許可されます（id、x、y、fixedは明らかに除外されます）。
var options = {
physics:{
enabled: true,
barnesHut: {
theta: 0.5,
gravitationalConstant: -2000,
centralGravity: 0.3,
springLength: 95,
springConstant: 0.04,
damping: 0.09,
avoidOverlap: 0
},
forceAtlas2Based: {
theta: 0.5,
gravitationalConstant: -50,
centralGravity: 0.01,
springConstant: 0.08,
springLength: 100,
damping: 0.4,
avoidOverlap: 0
},
repulsion: {
centralGravity: 0.2,
springLength: 200,
springConstant: 0.05,
nodeDistance: 100,
damping: 0.09
},
hierarchicalRepulsion: {
centralGravity: 0.0,
springLength: 100,
springConstant: 0.01,
nodeDistance: 120,
damping: 0.09,
avoidOverlap: 0
},
maxVelocity: 50,
minVelocity: 0.1,
solver: 'barnesHut',
stabilization: {
enabled: true,
iterations: 1000,
updateInterval: 100,
onlyDynamicEdges: false,
fit: true
},
timestep: 0.5,
adaptiveTimestep: true,
wind: { x: 0, y: 0 }
}
}
network.setOptions(options);
Name
Type
Default
Description
enabled
Boolean
true
物理システムのオンまたはオフを切り替えます。このプロパティは任意です。以下のオプションのいずれかを定義する場合、enabledが未定義の場合はtrueに設定されます。
barnesHut.theta
Number
0.5
このパラメータは、統合された長距離力と個々の短距離力の境界を決定します。単純化すると、高い値は速くなりますが、エラーが増えます。低い値は遅くなりますが、エラーが少なくなります。
barnesHut.gravitationalConstant
Number
-2000
重力は引き付けます。私たちは反発が好きです。したがって、値は負の値です。反発を強くしたい場合は、値を減らします（たとえば、-10000、-50000）。
barnesHut.centralGravity
Number
0.3
全体のネットワークを中心に引き寄せる中心重力アトラクタがあります。
barnesHut.springLength
Number
95
エッジはバネとしてモデル化されます。このspringLengthは、バネの休止長さです。
barnesHut.springConstant
Number
0.04
これはバネの「堅さ」です。値が高いほど強力なバネになります。
barnesHut.damping
Number
0.09
受け入れ範囲：[0..1]。ダンピング係数は、前の物理シミュレーションのイテレーションから次のイテレーションに引き継がれる速度の割合です。
barnesHut.avoidOverlap
Number
0
受け入れ範囲：[0..1]。0より大きい場合、ノードのサイズが考慮されます。距離は、ノードの包括円の半径から計算されます。重力モデルおよび値1は最大の重なり回避です。
forceAtlas2Based.theta
Number
0.5
このパラメータは、統合された長距離力と個々の短距離力の境界を決定します。単純化すると、高い値は速くなりますが、エラーが増えます。低い値は遅くなりますが、エラーが少なくなります。
forceAtlas2Based.gravitationalConstant
Number
-50
これはbarnesHutメソッドと似ていますが、減衰は二次ではなく線形です。接続性も質量の要因として考慮されます。反発を強くしたい場合は、値を減らします（たとえば、-1000、-2000）。
forceAtlas2Based.centralGravity
Number
0.01
全体のネットワークを中心に引き寄せる中心重力アトラクタがあります。これは距離に依存しません。
forceAtlas2Based.springLength
Number
100
エッジはバネとしてモデル化されます。このspringLengthは、バネの休止長さです。
forceAtlas2Based.springConstant
Number
0.08
これはバネの「堅さ」です。値が高いほど強力なバネになります。
forceAtlas2Based.damping
Number
0.4
受け入れ範囲：[0..1]。ダンピング係数は、前の物理シミュレーションのイテレーションから次のイテレーションに引き継がれる速度の割合です。
forceAtlas2Based.avoidOverlap
Number
0
受け入れ範囲：[0..1]。0より大きい場合、ノードのサイズが考慮されます。距離は、ノードの包括円の半径から計算されます。重力モデルおよび値1は最大の重なり回避です。
repulsion.nodeDistance
Number
100
これは反発の影響範囲です。
repulsion.centralGravity
Number
0.2
全体のネットワークを中心に引き寄せる中心重力アトラクタがあります。
repulsion.springLength
Number
200
エッジはバネとしてモデル化されます。このspringLengthは、バネの休止長さです。
repulsion.springConstant
Number
0.05
これはバネの「堅さ」です。値が高いほど強力なバネになります。
repulsion.damping
Number
0.09
受け入れ範囲：[0..1]。ダンピング係数は、前の物理シミュレーションのイテレーションから次のイテレーションに引き継がれる速度の
hierarchicalRepulsion.nodeDistance
Number
120
これは反発の影響範囲です。
hierarchicalRepulsion.centralGravity
Number
0.0
全体のネットワークを中心に引き寄せる中心重力アトラクタがあります。
hierarchicalRepulsion.springLength
Number
100
エッジはバネとしてモデル化されます。このspringLengthは、バネの休止長さです。
hierarchicalRepulsion.springConstant
Number
0.01
これはバネの「堅さ」です。値が高いほど強力なバネになります。
hierarchicalRepulsion.damping
Number
0.09
受け入れ範囲：[0..1]。ダンピング係数は、前の物理シミュレーションのイテレーションから次のイテレーションに引き継がれる速度の割合です。
hierarchicalRepulsion.avoidOverlap
Number
0
受け入れ範囲：[0..1]。0より大きい場合、ノードのサイズが考慮されます。距離は、ノードの包括円の半径から計算されます。重力モデルおよび値1は最大の重なり回避です。
maxVelocity
Number
50
物理モジュールはノードの最大速度を制限して安定化の時間を増やします。これが最大値です。
minVelocity
Number
0.1
すべてのノードの最小速度に達したら、ネットワークが安定化したと見なし、シミュレーションが停止します。
solver
String
'barnesHut'
独自のソルバーを選択できます。可能なオプション：'barnesHut'、'repulsion'、'hierarchicalRepulsion'、'forceAtlas2Based'。hierarchicalレイアウトを設定した場合、hierarchical repulsionソルバーが自動的に選択されます（ここに入力した内容に関係なく）。
stabilization.enabled
Boolean
true
安定化を切り替えます。これはオプションのプロパティです。未定義の場合、このオブジェクトのいずれかのプロパティが定義されている場合は自動的にtrueに設定されます。
stabilization.iterations
Number
1000
物理モジュールは、最大イテレーション数でネットワークを安定化しようとします。ネットワークが指定された回数より少ないイテレーションで安定化した場合、最大数に到達する前に終了します。
stabilization.updateInterval
Number
50
安定化中にDOMがフリーズすることがあります。安定化を途中で分割して、ローディングバーを表示するために使用できます。intervalは、安定化Progressイベントがトリガーされるまでのイテレーション数を指定します。
stabilization.onlyDynamicEdges
Boolean
false
すべてのノードの位置を事前に定義し、ダイナミックスムーズエッジのみを安定化する場合はtrueに設定します。これにより、可視性のないダイナミックスムーズカーブサポートノードを除くすべてのノードがフリーズします。可視ノードを移動および安定化させたい場合は、これを使用しないでください。
stabilization.fit
Boolean
true
安定化が完了したときにビューを全ノードにフィットさせるかどうかを切り替えます。
timestep
Number
0.5
物理シミュレーションは離散的です。つまり、時間に基づいてステップを踏み、力を計算し、ノードを移動し、別のステップを踏みます。この数値を増やすとステップが大きくなり、ネットワークが不安定になる可能性があります。ネットワークで多くのジャタリ運動が見られる場合は、この値を少し減らすと良いでしょう。
adaptiveTimestep
Boolean
true
スタビライゼーションが有効な場合にのみ、タイムステップが自動的に適応されます。タイムステップは、安定化時にのみ適用され、安定化時間を大幅に短縮するために賢明に調整されます。上記で設定されたタイムステップは、最小タイムステップとして取られます。これにより、improvedLayoutアルゴリズムを使用することでさらなる改善が可能です。
wind.x
Number
0
非固定ノードを右に押すために適用される力の量（正の値）または左に押すための力（負の値）です。
wind.y
Number
0
非固定ノードを下に押すために適用される力の量（正の値）または上に押すための力（負の値）です。