2017-07-13 3 views
0

Ich möchte einige Gruppen von Knoten in meinem Graph anders als die anderen Knoten verhalten. Zum Beispiel habe ich eine Gruppe namens Eigenschaften, die ich dynamisch zum Graphen hinzufüge. Ich muss die Schwerkraftkonstanten oder -gewichte für diese Gruppe ändern, damit sie näher am Elternknoten sind als der Rest der Knoten.Ändern der Physik basierend auf Gruppe - visjs

example

Ich hoffe, dass dieses Beispiel hilft, das Problem zu visualisieren. (Musste schwarz aus den Etiketten wegen sensibler Informationen)

Wie würde ich erreichen dies in vis.js

Antwort

1

//

Hallo Json.

siehe das beigefügte Code-Snippet. hoffe es hilft dir.

// create an array with nodes 
 
    var nodes = new vis.DataSet([ 
 
    {id: 1, label: 'Node 1', group: 1}, 
 
    {id: 2, label: 'Node 2', group: 2}, 
 
    {id: 3, label: 'Node 3', group: 1}, 
 
    {id: 4, label: 'Node 4', group: 2}, 
 
    {id: 5, label: 'Node 5', group: 2} 
 
    ]); 
 

 
    // create an array with edges 
 
    var edges = new vis.DataSet([ 
 
    {from: 1, to: 3}, 
 
    {from: 2, to: 4}, 
 
    {from: 2, to: 5} 
 
    ]); 
 

 
    // create a network 
 
    var container = document.getElementById('mynetwork'); 
 
    var data = { 
 
    nodes: nodes, 
 
    edges: edges 
 
    }; 
 
    var options = { 
 
    groups: { 
 
     1: { color: 'red', mass: 500 },// try to change this value 
 
     2: { color: 'blue', mass: 5 } 
 
    }, 
 
    physics: true 
 
    }; 
 
    var network = new vis.Network(container, data, options); 
 
#mynetwork { 
 
     width: 600px; 
 
     height: 400px; 
 
     border: 1px solid lightgray; 
 
    } 
 

 
    p { 
 
     max-width: 600px; 
 
    }
<!doctype html> 
 
<html> 
 
<head> 
 
    <title>Network | Basic usage</title> 
 
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.20.0/vis.min.js"></script> 
 
    <link href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.20.0/vis.min.css" rel="stylesheet" type="text/css"/> 
 
</head> 
 
<body> 
 
<div id="mynetwork"></div> 
 

 

 

 
</body> 
 
</html>

+0

Vielen Dank! Irgendeine Möglichkeit, so etwas mit einem anderen Physikmodell zu verwenden? Wie "forceAtlas2Based"? – Jason

+0

@Jason, soweit ich es verstehe, sollte es das gleiche sein. versuchen hinzuzufügen: "Kanten": { "glatt": { "force": "none" } }, "Physik": { "forceAtlas2Based": { "centralGravity": 0,03, "federLength": 100 }, "minVelocity": 0.75, "solver": "forceAtlas2Based" } zu Ihren Optionen. – TERMIN

+0

thx Sie waren eine große Hilfe. Klappt wunderbar – Jason

Verwandte Themen