Vis.js Per Group Physics - vis.js

Question

I'll start by describing what I'd like to achieve. The attached image is the closest I've gotten.
The 3 blue Hexes should all be in contact.
The pink Hexes should all run horizontally.
The white (and one red) should flow roughly as they do from the green to the pink where they attach. all these links should be uniform in length.
The yellow should do the same starting from the orange.
I am able to achieve #1 as long as there are no other hexes attached. I think I could get what I'm looking for if I could have the 4 groups not affected by each other's physics as much as they are. The connections between the white and pink and yellow and pink can be longer than the ones between the white and orange as needed to make it 'fit'.
There are 4 physics: false nodes attached to the green, left pink, orange, and all three blues. the fixed attribute seemed more appropriate but when positioned that way the nodes seemed to ignore the x and y values. These are used to pull the graphic into shape. I'm open to alternative ways of doing that too.
Is there another way to achieve what I'm looking for? At the very least is there a way to force the pink nodes to prefer running horizontally?
I've tried various physics solvers. The default barnesHut is what I'm using currently.
var hex_style = 'cursor: pointer; stroke: #000; stroke-width: 1;';
var hextext_style = 'text-align: center; height: 56%; width: 80%; padding: 22% 10%;';
var present_style = 'fill: #55F; font-size: 35px; cursor: pointer; fill-opacity: 1; stroke: #000; stroke-width: 1; transform: rotate(90deg); transform-origin: 50% 50%;';
var past_style = 'fill: #F99; font-size: 35px; cursor: pointer; fill-opacity: 1; stroke: #000; stroke-width: 1; transform: rotate(90deg); transform-origin: 50% 50%;';
var nirvana_style = 'fill: #5F5; font-size: 35px; cursor: pointer; fill-opacity: 1; stroke: #000; stroke-width: 1; transform: rotate(90deg); transform-origin: 50% 50%;';
var future_nirvana_style = 'fill: #FFF; font-size: 35px; cursor: pointer; fill-opacity: 1; stroke: #000; stroke-width: 1; transform: rotate(90deg); transform-origin: 50% 50%;';
var hell_style = 'fill: #FA0; font-size: 35px; cursor: pointer; fill-opacity: 1; stroke: #000; stroke-width: 1; transform: rotate(90deg); transform-origin: 50% 50%;';
var future_hell_style = 'fill: #EE9; font-size: 35px; cursor: pointer; fill-opacity: 1; stroke: #000; stroke-width: 1; transform: rotate(90deg); transform-origin: 50% 50%;';
var wild_card_style = 'fill: #F66; font-size: 35px; cursor: pointer; fill-opacity: 1; stroke: #000; stroke-width: 1; transform: rotate(90deg); transform-origin: 50% 50%;';
var description_white_style = 'color:white; font-size: 35px';
var description_black_style = 'color:black; font-size: 35px';
var hexsvg = function(svg_class, poly_class, div_class, message_class, message) {
var svg = '<svg style="' + svg_class + '" xmlns="http://www.w3.org/2000/svg" version="1.1" width="300" height="300" xmlns:xlink="http://www.w3.org/1999/xlink">' +
'<polygon style="' + poly_class + '" points="300,150 225,280 75,280 0,150 75,20 225,20"></polygon>' +
'<foreignObject x="0" y="0" width="100%" height="100%">' +
'<div style="' + div_class + '" xmlns="http://www.w3.org/1999/xhtml">' +
'<span style="' + message_class + '">' + message + '</span>' +
'</div>' +
'</foreignObject>' +
'</svg>';
return svg;
};
var svgurl = function(svg) {
return "data:image/svg+xml;charset=utf-8," + encodeURIComponent(svg);
};
var network;
var draw = function() {
if (network) {
network.destroy();
}
var nodes = [];
var edges = [];
// Add the nodes
nodes.push({
id: 'present_1',
group: 'present',
shape: 'image',
image: svgurl(hexsvg(hex_style, present_style, hextext_style, description_white_style, ''))
});
nodes.push({
id: 'present_2',
group: 'present',
shape: 'image',
image: svgurl(hexsvg(hex_style, present_style, hextext_style, description_white_style, ''))
});
nodes.push({
id: 'present_3',
group: 'present',
shape: 'image',
image: svgurl(hexsvg(hex_style, present_style, hextext_style, description_white_style, ''))
});
nodes.push({
id: 4,
group: 'past',
shape: 'image',
image: svgurl(hexsvg(hex_style, past_style, hextext_style, description_black_style, ''))
});
nodes.push({
id: 5,
group: 'past',
shape: 'image',
image: svgurl(hexsvg(hex_style, past_style, hextext_style, description_black_style, ''))
});
nodes.push({
id: 6,
group: 'past',
shape: 'image',
image: svgurl(hexsvg(hex_style, past_style, hextext_style, description_black_style, ''))
});
nodes.push({
id: 7,
group: 'past',
shape: 'image',
image: svgurl(hexsvg(hex_style, past_style, hextext_style, description_black_style, ''))
});
nodes.push({
id: 8,
group: 'past',
shape: 'image',
image: svgurl(hexsvg(hex_style, past_style, hextext_style, description_black_style, ''))
});
nodes.push({
id: 9,
group: 'past',
shape: 'image',
image: svgurl(hexsvg(hex_style, past_style, hextext_style, description_black_style, ''))
});
nodes.push({
id: 10,
group: 'past',
shape: 'image',
image: svgurl(hexsvg(hex_style, past_style, hextext_style, description_black_style, ''))
});
nodes.push({
id: 'nirvana_1',
group: 'nirvana',
shape: 'image',
image: svgurl(hexsvg(hex_style, nirvana_style, hextext_style, description_white_style, ''))
});
nodes.push({
id: 11,
group: 'future_nirvana',
shape: 'image',
image: svgurl(hexsvg(hex_style, future_nirvana_style, hextext_style, description_black_style, ''))
});
nodes.push({
id: 12,
group: 'future_nirvana',
shape: 'image',
image: svgurl(hexsvg(hex_style, future_nirvana_style, hextext_style, description_black_style, ''))
});
nodes.push({
id: 13,
group: 'future_nirvana',
shape: 'image',
image: svgurl(hexsvg(hex_style, future_nirvana_style, hextext_style, description_black_style, ''))
});
nodes.push({
id: 14,
group: 'future_nirvana',
shape: 'image',
image: svgurl(hexsvg(hex_style, future_nirvana_style, hextext_style, description_black_style, ''))
});
nodes.push({
id: 15,
group: 'future_nirvana',
shape: 'image',
image: svgurl(hexsvg(hex_style, future_nirvana_style, hextext_style, description_black_style, ''))
});
nodes.push({
id: 'wild_card',
group: 'future_nirvana',
shape: 'image',
image: svgurl(hexsvg(hex_style, wild_card_style, hextext_style, description_black_style, ''))
});
nodes.push({
id: 16,
group: 'future_nirvana',
shape: 'image',
image: svgurl(hexsvg(hex_style, future_nirvana_style, hextext_style, description_black_style, ''))
});
nodes.push({
id: 17,
group: 'future_nirvana',
shape: 'image',
image: svgurl(hexsvg(hex_style, future_nirvana_style, hextext_style, description_black_style, ''))
});
nodes.push({
id: 18,
group: 'future_nirvana',
shape: 'image',
image: svgurl(hexsvg(hex_style, future_nirvana_style, hextext_style, description_black_style, ''))
});
nodes.push({
id: 19,
group: 'future_nirvana',
shape: 'image',
image: svgurl(hexsvg(hex_style, future_nirvana_style, hextext_style, description_black_style, ''))
});
nodes.push({
id: 20,
group: 'future_nirvana',
shape: 'image',
image: svgurl(hexsvg(hex_style, future_nirvana_style, hextext_style, description_black_style, ''))
});
nodes.push({
id: 21,
group: 'future_nirvana',
shape: 'image',
image: svgurl(hexsvg(hex_style, future_nirvana_style, hextext_style, description_black_style, ''))
});
nodes.push({
id: 22,
group: 'future_nirvana',
shape: 'image',
image: svgurl(hexsvg(hex_style, future_nirvana_style, hextext_style, description_black_style, ''))
});
nodes.push({
id: "hell_1",
group: 'hell',
shape: 'image',
image: svgurl(hexsvg(hex_style, hell_style, hextext_style, description_white_style, ''))
});
nodes.push({
id: 24,
group: 'future_hell',
shape: 'image',
image: svgurl(hexsvg(hex_style, future_hell_style, hextext_style, description_black_style, ''))
});
nodes.push({
id: 25,
group: 'future_hell',
shape: 'image',
image: svgurl(hexsvg(hex_style, future_hell_style, hextext_style, description_black_style, ''))
});
nodes.push({
id: 26,
group: 'future_hell',
shape: 'image',
image: svgurl(hexsvg(hex_style, future_hell_style, hextext_style, description_black_style, ''))
});
// Central present node
nodes.push({
id: 'present_fixed',
x: 2500,
y: 500,
physics: false,
color: 'rgba(0,255,0,0)',
level: 2
});
edges.push({
from: 'present_1',
to: 'present_fixed',
smooth: {
type: 'discrete',
roundness: 0
},
color: {
color: 'white',
opacity: 0
}
});
edges.push({
from: 'present_2',
to: 'present_fixed',
smooth: {
type: 'discrete',
roundness: 0
},
color: {
color: 'white',
opacity: 0
}
});
edges.push({
from: 'present_3',
to: 'present_fixed',
smooth: {
type: 'discrete',
roundness: 0
},
color: {
color: 'white',
opacity: 0
}
});
// Present
edges.push({
from: 'present_1',
to: 'present_2',
smooth: {
type: 'discrete',
roundness: 0
}
});
edges.push({
from: 'present_2',
to: 'present_3',
smooth: {
type: 'discrete',
roundness: 0
}
});
edges.push({
from: 'present_3',
to: 'present_1',
smooth: {
type: 'discrete',
roundness: 0
}
});
// Past edges: {
edges.push({
from: 4,
to: 'present_1'
});
edges.push({
from: 5,
to: 4
});
edges.push({
from: 6,
to: 5
});
edges.push({
from: 7,
to: 6
});
edges.push({
from: 8,
to: 7
});
edges.push({
from: 9,
to: 8
});
edges.push({
from: 10,
to: 9
});
// Fixed Past node
nodes.push({
id: 'past_fixed',
x: 0,
y: 500,
physics: false,
color: 'rgba(0,0,0,0)',
level: 2
});
edges.push({
from: 'past_fixed',
to: 10,
smooth: {
type: 'discrete',
roundness: 0
},
color: {
color: 'white',
opacity: 0
}
});
// Central Hell node
nodes.push({
id: 'hell_fixed',
x: 3250,
y: 1000,
physics: false,
color: 'rgba(0,0,0,0)',
level: 3
});
edges.push({
from: 'hell_1',
to: 'hell_fixed',
smooth: {
type: 'discrete',
roundness: 0
},
color: {
color: 'white',
opacity: 0
}
});
// Hell Path
edges.push({
from: 24,
to: 'hell_1'
});
edges.push({
from: 25,
to: 24
});
edges.push({
from: 26,
to: 25
});
edges.push({
from: 4,
to: 26,
length: 400,
smooth: {
type: 'vertical'
}
});
// Central Nirvana node
nodes.push({
id: 'nirvana_fixed',
x: 4000,
y: 0,
physics: false,
color: 'rgba(0,0,0,0)',
level: 1
});
edges.push({
from: 'nirvana_1',
to: 'nirvana_fixed',
smooth: {
type: 'discrete',
roundness: 0
},
color: {
color: 'white',
opacity: 0
}
});
// Nirvana Path
edges.push({
from: 11,
to: 'nirvana_1'
});
edges.push({
from: 12,
to: 11
});
edges.push({
from: 13,
to: 12
});
edges.push({
from: 14,
to: 13
});
edges.push({
from: 15,
to: 14
});
edges.push({
from: 'wild_card',
to: 15
});
edges.push({
from: 16,
to: 'wild_card'
});
edges.push({
from: 17,
to: 16
});
edges.push({
from: 18,
to: 17
});
edges.push({
from: 19,
to: 18
});
edges.push({
from: 20,
to: 19
});
edges.push({
from: 21,
to: 20
});
edges.push({
from: 22,
to: 21
});
edges.push({
from: 10,
to: 22,
length: 500,
smooth: {
type: 'vertical'
}
});
// DOM element where the Network will be attached
var container = document.getElementById('hexchart');
var data = {
nodes: nodes,
edges: edges
};
// Configuration for the Network
var options = {
nodes: {
size: 125
},
edges: {
smooth: {
type: 'horizontal'
}
},
groups: {
present: {
background: 'blue',
mass: 50
},
past: {
background: 'pink'
},
nirvana: {
background: 'green'
},
hell: {
background: 'orange'
},
future_nirvana: {
background: 'white'
},
future_hell: {
background: 'yellow'
}
},
physics: {
solver: 'barnesHut',
/*forceAtlas2Based: {
gravitationalConstant: -600,
centralGravity: 0.0,
springConstant: 0.2,
springLength: 0,
damping: 0.06,
avoidOverlap: 1
},*/
barnesHut: {
gravitationalConstant: -7000,
centralGravity: 0.1,
springLength: 155,
springConstant: 1.0,
damping: 0.8,
avoidOverlap: 0.75
}
}
/*,
configure: {
filter: 'physics',
container: document.getElementById('optionsContainer'),
showButton: false
}*/
};
// Create a Network
network = new vis.Network(container, data, options);
};
document.onload(draw());
#hexchart {
width: 100%;
height: 800px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.js"></script>
<div id="optionsContainer" style="float:right"></div>
<div id="hexchart"></div>
vis.js 4.21.0
rendering in chrome