vis.js - Nút địa điểm theo cách thủ công

Question

Làm cách nào để đặt vị trí của nút trong vis.js?

Tôi muốn vị trí ban đầu ít nhất một nút theo cách thủ công.

Tôi biết rằng một nút có các tùy chọn x và y. Tôi đặt cả, và cũng đã cố gắng biến thể của bố trí tùy chọn (randomSeed, improvedLayout, thứ bậc), nút không bao giờ được đặt nơi tôi đặt nó.

Đây là mạng đơn giản, tôi đã xác định:

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

Nút được đặt, nhưng không phải ở điểm tôi đặt (200.100), nhưng ở vị trí khác.

Tôi chưa tìm thấy ví dụ để đặt rõ vị trí của nút trên trang vis.js. Ai đó có thể vui lòng cung cấp một? Cảm ơn!

Answer 1

Bạn thực sự có thể đặt vị trí cố định cho một nút bằng cách đặtcủa nóvà y thuộc tính, và có, tính năng này hoạt động và không bị hỏng.

Vị trí x và y của nút không có nghĩa là vị trí bằng pixel trên màn hình, nhưng là vị trí cố định trong hệ tọa độ Mạng. Khi bạn di chuyển và thu phóng trong Mạng, các mục cố định cũng sẽ di chuyển và thu phóng, nhưng chúng sẽ luôn giữ cùng một vị trí tương đối với nhau. Giống như thị trấn nhà của bạn có một vị trí cố định (dài, lat) trên trái đất, nhưng bạn vẫn có thể phóng to và di chuyển thị trấn của mình trong Google Maps.

EDIT: Để đạt được những gì bạn muốn, bạn có thể sửa phóng to và di chuyển và điều chỉnh khung nhìn như vậy mà nó phù hợp với các điểm ảnh của canvas HTML, đây là một bản 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>

Answer 2

Tài liệu nói rằng nodes positioned by the layout algorithm

Khi sử dụng cách bố trí phân cấp, hoặc là x hoặc vị trí y được thiết lập bởi động cơ bố trí tùy thuộc vào loại xem

Bạn có thể đặt chúng trong với những điểm rõ ràng nhưng tôi không khuyên bạn làm điều này - đó không phải là cách chính xác cho công việc với biểu đồ - xem xét tốt hơn nhiệm vụ của bạn - có thể bạn không cần đồ thị (hoặc bạn không cần phải đặt điểm vào vị trí chính xác).

Dù sao - nếu bạn thực sự muốn đưa vào một số vị trí sau đó bạn cần phải sử dụng bố trí ngẫu nhiên với tùy chọn cố định thiết lập để đúng hoặc physic tùy chọn thiết lập để sai

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>

Answer 3

:) Tôi chỉ làm điều này lần đầu tiên sáng nay. X = 0 và Y = 0 cho một đồ thị bắt đầu căn giữa, không phải ở trên cùng bên trái của canvas. Có một thuộc tính cố định của nút mà bạn có thể đặt thành true cho cả x và y trên một nút có các giá trị x và y được đặt và có các nút khác sử dụng vật lý liên quan đến nó.

Nhìn vào tab tùy chọn đầy đủ trên trang http://visjs.org/docs/network/nodes.html#

và bạn sẽ thấy mảnh này:

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