javascript vis.js - 手动放置节点
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32902720/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
vis.js - Place node manually
提问by Wulsh Briggle
How do I set a node's position in vis.js?
如何在 vis.js 中设置节点的位置？
I want to initially position at least one node manually.
我想手动定位至少一个节点。
I know that a node has the options xand y. I set both, and also tried variations of layoutoptions (randomSeed, improvedLayout, hierarchical), the node was never placed where I set it.
我知道一个节点有选项x和y。我同时设置，也试过的变化布局选项（randomSeed，improvedLayout，分层），节点从未被放置在我设定。
Here's the simple network I defined:
这是我定义的简单网络：
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);
The node is placed, but not at the point I set (200,100), but at another position.
节点被放置，但不是在我设置的点（200,100），而是在另一个位置。
I haven't found an example for explicitly setting a node's position on the vis.js page. Could someone please provide one? Thanks!
我还没有找到在 vis.js 页面上显式设置节点位置的示例。有人可以提供一个吗？谢谢！
回答by Jos de Jong
You can indeed set a fixed position for a node by setting its xand yproperties, and yes, this feature works and is not broken.
您确实可以通过设置节点x和y属性来为节点设置固定位置，是的，此功能有效且未损坏。
The xand yposition of a node does not mean a position in pixels on the screen, but is a fixed position in the Networks coordinate system. When you move and zoom in the Network, the fixed items will move and zoom too, but they will always keep the same position relative to each other. It's like your home town has a fixed location (long, lat) on earth, but you can still zoom and move your town in Google Maps.
节点的x和y位置并不意味着在屏幕上以像素为单位的位置，而是网络坐标系中的一个固定位置。当您移动和放大网络时，固定项目也会移动和缩放，但它们将始终保持相对于彼此的相同位置。这就像你的家乡在地球上有一个固定的位置（长，纬度），但你仍然可以在谷歌地图中缩放和移动你的城镇。
EDIT: To achieve what you want, you can fix zooming and moving, and adjust the viewport such that it matches the pixels of the HTML canvas, here is a demo:
编辑：要实现您想要的效果，您可以修复缩放和移动，并调整视口使其与 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>回答by Andriy Kuba
Documentation says that nodes positioned by the layout algorithm
文档说由布局算法定位的节点
When using the hierarchical layout, either the x or y position is set by the layout engine depending on the type of view
使用分层布局时，x 或 y 位置由布局引擎根据视图类型设置
You can put they in to explicit points but I would not recommend this - it's not the correct way for the work with the graphs - better review your task - maybe you do not need graphs (or your do not need to put points in to exactly position).
您可以将它们放入明确的点，但我不建议这样做 - 这不是使用图表的正确方法 - 更好地您的任务 - 也许您不需要图表（或者您不需要将点准确地放入位置）。
Anyway - if you really want to put in to some position then you need to use random layout with the fixedoption set to trueor physicoption set to false
无论如何 - 如果你真的想放在某个位置，那么你需要使用随机布局，固定选项设置为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>回答by Ed Allen
:) I just did this for the first time this morning. X = 0 and Y = 0 for a graph start centered, not at the top left of the canvas. There is a fixed attribute of the node that you can set to true for both x and y on a node with its x and y values set and have other nodes use physics in relation to it.
:) 我今天早上第一次这样做。X = 0 和 Y = 0 对于图形开始居中，而不是在画布的左上角。节点有一个固定属性，您可以在设置了 x 和 y 值的节点上将 x 和 y 都设置为 true，并让其他节点使用与其相关的物理。
Look at the full options tab on page http://visjs.org/docs/network/nodes.html#
查看页面http://visjs.org/docs/network/nodes.html#上的完整选项选项卡
and you'll see this piece:
你会看到这篇文章：
fixed: {
x:false,
y:false
},
