vis.js - 手动放置节点
vis.js - Place node manually
如何设置节点在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 页面上明确设置节点位置的示例。有人可以提供一个吗?谢谢!
文档说 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
你可以把它们放在明确的点上,但我不推荐这样做——这不是处理图表的正确方法——更好地回顾你的任务——也许你不需要图表(或者你不需要把点放在准确的位置)。
无论如何 - 如果你真的想放在某个位置,那么你需要使用随机布局并将 fixed 选项设置为 true 或 physic 选项设置为 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>
您确实可以通过设置其 x
和 y
属性来为节点设置固定位置,是的,此功能有效且未损坏。
节点的x
和y
位置并不是指屏幕上以像素为单位的位置,而是网络坐标系中的固定位置。当您在网络中移动和缩放时,固定的项目也会移动和缩放,但它们将始终保持相对于彼此的相同位置。这就像你的家乡在地球上有一个固定的位置(经度、纬度),但你仍然可以在 Google 地图中缩放和移动你的城镇。
编辑:为了达到你想要的效果,你可以修复缩放和移动,并调整视口,使其与 HTML canvas 的像素相匹配,这是一个演示:
// 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>
:) 我今天早上第一次这样做。 X = 0 和 Y = 0 对于图形开始居中,而不是在 canvas 的左上角。有一个节点的固定属性,您可以将一个节点上的 x 和 y 的 x 和 y 设置为 true,并设置其 x 和 y 值,并让其他节点使用与其相关的物理。
查看页面上的完整选项标签
http://visjs.org/docs/network/nodes.html#
你会看到这篇文章:
fixed: {
x:false,
y:false
},
如何设置节点在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 页面上明确设置节点位置的示例。有人可以提供一个吗?谢谢!
文档说 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
你可以把它们放在明确的点上,但我不推荐这样做——这不是处理图表的正确方法——更好地回顾你的任务——也许你不需要图表(或者你不需要把点放在准确的位置)。
无论如何 - 如果你真的想放在某个位置,那么你需要使用随机布局并将 fixed 选项设置为 true 或 physic 选项设置为 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>
您确实可以通过设置其 x
和 y
属性来为节点设置固定位置,是的,此功能有效且未损坏。
节点的x
和y
位置并不是指屏幕上以像素为单位的位置,而是网络坐标系中的固定位置。当您在网络中移动和缩放时,固定的项目也会移动和缩放,但它们将始终保持相对于彼此的相同位置。这就像你的家乡在地球上有一个固定的位置(经度、纬度),但你仍然可以在 Google 地图中缩放和移动你的城镇。
编辑:为了达到你想要的效果,你可以修复缩放和移动,并调整视口,使其与 HTML canvas 的像素相匹配,这是一个演示:
// 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>
:) 我今天早上第一次这样做。 X = 0 和 Y = 0 对于图形开始居中,而不是在 canvas 的左上角。有一个节点的固定属性,您可以将一个节点上的 x 和 y 的 x 和 y 设置为 true,并设置其 x 和 y 值,并让其他节点使用与其相关的物理。
查看页面上的完整选项标签 http://visjs.org/docs/network/nodes.html#
你会看到这篇文章:
fixed: {
x:false,
y:false
},