vis.js - 手动放置节点

Question

如何在 vis.js 中设置节点的位置？

我想要手动地初始化至少一个节点的位置。

我知道节点有选项x和y。我设置了这两个选项，并尝试了各种不同的layout选项（randomSeed、improvedLayout、hierarchical），但是节点始终没有被放置在我设置的位置上。

以下是我定义的简单网络：

  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页面上节点位置的例子。请问是否有人能够提供一个？谢谢！

- Wulsh Briggle

---

请添加一些注释，说明您具体的问题在哪里以及您期望的行为是什么！谢谢。 - Leonid Glanz

我想让节点1位于200,100的位置（见示例），但它没有被放置在那里。 - Wulsh Briggle

如果您对如何序列化/保存节点位置并加载它们感兴趣，请查看此答案。 - totymedli

Answer 1

通过设置节点的 x 和 y 属性，您确实可以为节点设置固定位置，并且这个功能是正常工作的。

x 和 y 位置并不意味着屏幕上以像素为单位的位置，而是网络坐标系中的固定位置。当您在 Network 中移动和缩放时，固定的项也会移动和缩放，但它们始终保持相对于彼此的相同位置。就像您家乡在地球上有一个固定的位置（经纬度），但是您仍然可以在 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>

- Jos de Jong

---

那么，如果您想将一个节点放置在与其他节点不同的位置（例如中间），则必须明确设置所有节点的位置。我想展示一个以节点为中心的图形，其中一个节点位于中心，其他节点围绕它放置；其他节点的确切位置并不重要，因此我更喜欢自动设置其他节点的位置。 - Wulsh Briggle

并非所有节点都必须具有固定位置。（如果存在非固定节点，则应再次设置“physics:true”） - Jos de Jong

Answer 2

文档说明说，由布局算法定位的节点

当使用层次布局时，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>

- Andriy Kuba

Answer 3

:) 我今天早上第一次尝试了这个。X=0和Y=0表示图形起始点位于中心，而不是画布左上角。有一个固定的节点属性，可以在设置x和y值的节点上将其设置为true，并使其他节点根据它使用物理引擎。

查看页面 http://visjs.org/docs/network/nodes.html# 上完整的选项标签，您会看到这部分：

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

- Ed Allen