vis.js - 手动放置节点 [英] vis.js - Place node manually

问题描述

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

我想最初手动定位至少一个节点。

I want to initially position at least one node manually.

我知道节点有 x 和 y 选项。我设置了两个，并尝试了布局选项的变体（ randomSeed ， ImprovedLayout ，分层），节点是从未放置在我设置的地方。

I know that a node has the options x and y. I set both, and also tried variations of layout options (randomSeed, improvedLayout, hierarchical), the node was never placed where I set it.

这是我定义的简单网络：

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);

节点已放置，但不在我设置的点（200,100），而是在另一个位置。

The node is placed, but not at the point I set (200,100), but at another position.

我还没有找到在vis.js页面上明确设置节点位置的示例。有人可以提供吗？谢谢！

I haven't found an example for explicitly setting a node's position on the vis.js page. Could someone please provide one? Thanks!

推荐答案

您确实可以通过设置 x 和 y 属性，是的，此功能有效且不会中断。

You can indeed set a fixed position for a node by setting its x and y properties, and yes, this feature works and is not broken.

节点的 x 和 y 位置确实如此并不是指屏幕上的像素位置，而是网络坐标系中的固定位置。当您移动和放大网络时，固定项目也会移动和缩放，但它们将始终保持相对于彼此的相同位置。这就像你的家乡在地球上有一个固定的位置（长，纬度），但你仍然可以在谷歌地图中缩放和移动你的城镇。

The x and y position 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.

编辑：要实现您想要的效果，您可以修复缩放和移动，并调整视口以使其与HTML画布的像素匹配，这是一个演示：

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:

// 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>

这篇关于vis.js - 手动放置节点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！