vis.js - ノードを手動で配置する

Question

vis.jsでノードの位置を設定するにはどうすればよいですか？

私は最初に少なくとも1つのノードを手動で配置したいと考えています。

私はノードがオプションxとyを持っていることを知っています。私は両方を設定してもレイアウトオプション（randomSeed、improvedLayout、階層）のバリエーションを試みた私はそれを設定する場合、ノードが配置されませんでした。

ここに私が定義され、単純なネットワークは、次のとおり

nodes = new vis.DataSet([ 
    {id: 1, shape: 'circularImage', image: DIR + '1_circle', label:"1", x: 200, y: 100}, 
    {id: 2, shape: 'circularImage', image: DIR + '2_circle', label:"2"}, 
    {id: 3, shape: 'circularImage', image: DIR + '3_circle', label:"3"}, 
    ]); 

    edges = [ 
    {id: "01-03", from: 1, to: 3, length: 300, label: '1 - 3'}, 
    {id: "02-03", from: 2, to: 3}, 
    ]; 

    var container = document.getElementById('graphcontainer'); 
    var data = { 
    nodes: nodes, 
    edges: edges 
    }; 
    var options = { 
    nodes: { 
     borderWidth: 4, 
     size: 30, 
     color: { 
     border: '#222222', 
     background: '#666666' 
     }, 
     font:{ 
     color:'#000000' 
     } 
    }, 
    edges: { 
     color: 'lightgray' 
    }, 
    //layout: {randomSeed:0} 
    //layout: {hierarchical: true} 
    layout: { 
     randomSeed: undefined, 
     improvedLayout:true, 
     hierarchical: { 
     enabled:false, 
     levelSeparation: 150, 
     direction: 'UD', // UD, DU, LR, RL 
     sortMethod: 'hubsize' // hubsize, directed 
     } 
    } 
    }; 
    network = new vis.Network(container, data, options); 

ノードを配置ではなく、私が設定点（200,100）で、しかし別の位置にあります。

vis.jsページでノードの位置を明示的に設定する例は見つかりませんでした。誰かが提供してもらえますか？ありがとう！

Answer 1

実際にノードの固定位置は、に設定することができますとyのプロパティをサポートしています。はい、この機能は機能し、壊れていません。

xとyノードの位置は、画面上のピクセル単位の位置を意味するのではなく、ネットワーク座標系の固定位置です。ネットワークを移動してズームすると、固定項目も移動してズームされますが、常に同じ位置を維持します。あなたの故郷には地球上の固定された場所（長距離、緯度）がありますが、Googleマップであなたの街をズームして移動することはできます。

EDIT：あなたが望むものを達成するために、あなたはズームや移動修正し、それがHTMLキャンバスのピクセルに一致するようにビューポートを調整することができ、ここでのデモです：

// create an array with nodes 
 
var nodes = new vis.DataSet([ 
 
    {id: 1, label: 'x=200, y=200', x: 200, y: 200}, 
 
    {id: 2, label: 'node 2', x: 0, y: 0}, 
 
    {id: 3, label: 'node 3', x: 0, y: 400}, 
 
    {id: 4, label: 'node 4', x: 400, y: 400}, 
 
    {id: 5, label: 'node 5', x: 400, y: 0} 
 
]); 
 

 
// create an array with edges 
 
var edges = new vis.DataSet([ 
 
    {from: 1, to: 2, label: 'to x=0, y=0'}, 
 
    {from: 1, to: 3, label: 'to x=0, y=400'}, 
 
    {from: 1, to: 4, label: 'to x=400, y=400'}, 
 
    {from: 1, to: 5, label: 'to x=400, y=0'} 
 
]); 
 

 
// create a network 
 
var container = document.getElementById('mynetwork'); 
 
var data = { 
 
    nodes: nodes, 
 
    edges: edges 
 
}; 
 
var width = 400; 
 
var height = 400; 
 
var options = { 
 
    width: width + 'px', 
 
    height: height + 'px', 
 
    nodes: { 
 
     shape: 'dot' 
 
    }, 
 
    edges: { 
 
     smooth: false 
 
    }, 
 
    physics: false, 
 
    interaction: { 
 
     dragNodes: false,// do not allow dragging nodes 
 
     zoomView: false, // do not allow zooming 
 
     dragView: false // do not allow dragging 
 
    } 
 
}; 
 
var network = new vis.Network(container, data, options); 
 
    
 
// Set the coordinate system of Network such that it exactly 
 
// matches the actual pixels of the HTML canvas on screen 
 
// this must correspond with the width and height set for 
 
// the networks container element. 
 
network.moveTo({ 
 
    position: {x: 0, y: 0}, 
 
    offset: {x: -width/2, y: -height/2}, 
 
    scale: 1, 
 
})

#mynetwork { 
 
    border: 1px solid black; 
 
    background: white; 
 
    display: inline-block; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.9.0/vis.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.9.0/vis.min.css" rel="stylesheet" type="text/css" /> 
 

 
<p>The following network has a fixed scale and position, such that the networks viewport exactly matches the pixels of the HTML canvas.</p> 
 
<div id="mynetwork"></div>

Answer 2

ドキュメントはnodes positioned by the layout algorithm

xまたはy位置のいずれかがビューの種類に応じてレイアウトエンジンによる に設定され、階層的なレイアウトを使用して

あなたがそれらを置くことができると言います明示的なポイントにするが、私はこれをお勧めしません - それは、グラフの作業のための正しい方法ではありません - あなたの仕事をよく見直してください - おそらくあなたはグラフを必要としません（またはあなたは正確な位置にポイントを入れる必要はありません）。とにかく

- あなたが実際にいくつかの位置に置きたいならば、あなたは偽

var DIR = 'http://cupofting.com/wp-content/uploads/2013/10/'; 
 
nodes = new vis.DataSet([ 
 
    {id: 1, shape: 'circularImage', image: DIR + '1-circle.jpg', label:"1", x:0, y:0}, 
 
    {id: 2, shape: 'circularImage', image: DIR + '2-circle.jpg', label:"2", x:100, y:0}, 
 
    {id: 3, shape: 'circularImage', image: DIR + '3-circle.jpg', label:"3", x:0, y:100}, 
 
    ]); 
 

 
    edges = [ 
 
    {id: "01-03", from: 1, to: 3, length: 300, label: '1 - 3'}, 
 
    {id: "02-03", from: 2, to: 3}, 
 
    ]; 
 

 
    var container = document.getElementById('graphcontainer'); 
 
    var data = { 
 
    nodes: nodes, 
 
    edges: edges 
 
    }; 
 
    var options = { 
 
     physics:{ 
 
      stabilization: true, 
 
     }, 
 
    nodes: { 
 
     borderWidth: 4, 
 
     size: 10, 
 
     //fixed:true, 
 
     physics:false, 
 
     color: { 
 
     border: '#222222', 
 
     background: '#666666' 
 
     }, 
 
     font:{ 
 
     color:'#000000' 
 
     } 
 
    }, 
 
    edges: { 
 
     color: 'lightgray' 
 
    }, 
 
    layout: {randomSeed:0} 
 
    }; 
 
    network = new vis.Network(container, data, options);

<script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.9.0/vis.min.js"></script> 
 
<div id="graphcontainer" style="border: 1px solid red; width:300px; height:300px; "> </div>

に設定 真または 下剤オプションに設定 が固定オプションを使用してランダムなレイアウトを使用する必要があります

Answer 3

:)私は今朝初めてこれをやった。キャンバスの左上ではなく、グラフの中心を中心にしたX = 0とY = 0。ノードの固定属性があり、xとyの値が設定されたノードでxとyの両方に対してtrueに設定でき、他のノードではそれに関連して物理が使用されます。

ページ上のフルオプション]タブを見 http://visjs.org/docs/network/nodes.html#

、あなたがこの作品を見ることができます：

fixed: { 
    x:false, 
    y:false 
},