15

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

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

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

私が定義した単純なネットワークは次のとおりです。

  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 ページでノードの位置を明示的に設定する例は見つかりませんでした。誰か提供してくれませんか？ありがとう！

4

3 に答える 3

27

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

ノードの位置はx、y画面上のピクセル単位の位置を意味するのではなく、ネットワーク座標系での固定位置です。ネットワーク内で移動およびズームすると、固定されたアイテムも移動およびズームされますが、それらは互いに相対的に常に同じ位置を維持します。地球上で故郷の位置 (経度、緯度) が固定されているようなものですが、Google マップで町をズームしたり移動したりできます。

編集: 目的を達成するために、ズームと移動を修正し、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>

于 2015-10-05T14:05:38.533 に答える
4

ドキュメンテーションによると、ノードはレイアウト アルゴリズムによって配置されます。

階層レイアウトを使用する場合、ビューのタイプに応じてレイアウト エンジンによって x または y 位置が設定されます。

それらを明示的なポイントに入れることはできますが、これはお勧めしません-グラフを操作するための正しい方法ではありません-タスクをよりよく確認してください-グラフは必要ないかもしれません(またはポイントを正確に入れる必要はありません)位置）。

とにかく、本当にある位置に配置したい場合は、固定オプションをtrueに設定するか、物理オプションをfalseに設定してランダムレイアウトを使用する必要があります 

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>

于 2015-10-05T11:46:24.360 に答える
1

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

ページの完全なオプション タブを見てください http://visjs.org/docs/network/nodes.html#

そして、あなたはこの作品を見るでしょう：

fixed: {
  x:false,
  y:false
},
于 2015-11-04T23:59:06.913 に答える