vis.js - Düğüm düğümünü el ile

Question

Bir düğümün konumunu nasıl vis.js olarak ayarlayabilirim?

En azından bir düğümü el ile başlangıçta yerleştirmek istiyorum.

Bir düğüm seçenekleri x ve ysahip olduğunu biliyoruz. Ben bunu kümesi içinde, düğüm yerleştirilir asla düzen seçenekleri (hiyerarşik improvedLayout, , randomSeed) ait varyasyonlar denedi da hem ayarlayın ve.

Burada tanımlanan basit ağ verilmiştir:

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

düğüm yerleştirilebilir, ancak ben set noktasından (200.100) de, ama başka bir pozisyonda yer almaktadır.

Bir düğümün konumunu vis.js sayfasında açıkça ayarlamak için bir örnek bulamadım. Birisi lütfen bir tane verebilir mi? Teşekkürler!

Answer 1

Sen gerçekten onunayarlayarak bir düğüm için sabit konumunu ayarlayabilirsinizve y özellikleri ve evet, bu özellik çalışır ve bozuk değil. Bir düğümün bir konumunun x ve y konumu, piksellerin ekrandaki konumu değil, Ağlar koordinat sisteminde sabit bir konum olduğu anlamına gelmez. Ağı taşıdığınızda ve yakınlaştırdığınızda, sabit öğeler de hareket eder ve yakınlaştırır, ancak her zaman birbirlerine göre aynı konumu korurlar. Bulunduğunuz yerdeki şehrin sabit bir yere (uzun, lat) sahip olması gibi, ancak yine de şehrinizi Google Haritalar'da yakınlaştırabilir ve taşıyabilirsiniz.

DÜZENLEME:

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

: sen yakınlaştırma ve hareket düzeltmek ve burada HTML tuval piksel eşleşen bir demo olacak şekilde görünüm ayarlayabilirsiniz istediklerini elde etmek için

Answer 2

Belgeler nodes positioned by the layout algorithm

x veya y pozisyon görünümlerin herhangi türüne göre düzen motoru tarafından ayarlanır, hiyerarşik düzeni kullanarak

İçeri onlar koyabilirsiniz söylüyor açık noktalara ama bunu tavsiye etmem - grafiklerle çalışmanın doğru yolu değil - görevinizi daha iyi gözden geçirin - belki de grafiklere ihtiyacınız yoktur (veya tam olarak pozisyona koymanız gerekmez).

Neyse - Eğer gerçekten sonra bazı pozisyona koymak istiyorsanız yanlış

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>

ayarlı gerçek veya fizik seçeneğe ayarlanır sabit seçeneğiyle rastgele düzen kullanmak gerekir

Answer 3

:) Bu sabah ilk defa bunu yaptım. Grafiğin ortalanması için X = 0 ve Y = 0, tuvalin sol üst köşesinde değil. Düğümün x ve y değerleri kümesine göre x ve y için true olarak ayarlayabileceğiniz ve diğer düğümlerin buna göre fiziği kullandığı düğümün sabit bir özniteliği vardır. sayfa http://visjs.org/docs/network/nodes.html#

ve tam seçenekler sekmesinden

Bak sen bu parçayı göreceksiniz: En somut bir sorundur ve beklenen davranış budur nerede

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