vis.jsのnetwork(関係図)研究3

1599 ワード

前のページではノードを追加しながら絵を描きます.設定の変更とイベント応答の追加について説明します.
正直に設定した部分はあまり話したくないです.ここの文書はとてもいいです.http://visjs.org/docs/network/私が話したいことを一つ一つ分析してみると、ちょっとおっくうです.(:з」⑤)_
ここに私が使っている配置を貼って、簡単に説明してください.
var visOptions = {
	physics:{
		barnesHut:{
			gravitationalConstant:-100,
			centralGravity: 0,
			springConstant:0
		}
	},
	layout:{randomSeed:2},
	edges:{
		smooth: {
			enabled: true,
			type: "continuous",
			roundness: 0.5
		},
	},
	interaction:{
		keyboard: {bindToWindow: false},
		navigationButtons: true
	}
};
まずphysicsの部分です.物理的な動作、つまり画面上でノードを引っ張るという動作を定義しました.
デフォルトでは、線の長さが固定されており、線に弾力があり、適応ノードの位置が平衡状態に達し、全体の図が中間に寄せられます.
私が変えたいのはノードが自分で動かないので、線の長さが固定されていません.全体の図は中央に寄せないようにします.
barnesHutはデフォルトの物理演算規則です.
gravitationalContentはノードとノードの間の斥力であり、自分で調節する.
センターラルGravityは中央吸引力で、全体図を中央に寄せる力の大きさです.
スプリングコンスタントは線の弾性です.ここはノードの位置が固定されていますので、0に設定します.
physicsは次のような例の中で動的に調整して見ることができます.
http://visjs.org/examples/network/physics/physicsConfiguration.html
ラyout:{randomSeed:2}は、ランダムに生成されたときのランダムな種です.このようにすると毎回効果が同じです.
edgesの中でsmothは線の描き方を変えて、具体的に次の例で体得します.
http://visjs.org/examples/network/edgeStyles/smooth.html
デフォルトでは、線の中点も隠れているノードとして扱われます.type:「continous」を使うと、連続した線です.
インタラクティブという意味です.中には簡単にマウスを置いてドラッグしたり、キーボードのイベントがあります.
navigationButotonsはtrueが上下左右に拡大縮小する機能キーを設定します.
keyboard:{bindToWindow:false}は、キーボード応答イベントのリスニング範囲を制限し、デフォルトはフルスクリーンとして、
つまり、ページに他の入力枠があれば、入力ボックスの左右もvisに対する操作として扱われます.
具体的にはこのタイプに試してもいいです.physicsより詳細です.
http://visjs.org/examples/network/other/configuration.html