我将首先描述我想要实现的目标。所附图像是我得到的最接近的图像。
- 3 个蓝色 Hexes 应该都接触。
- 粉红色的Hexes应该都水平运行。
- 白色（和一个红色）应该大致从绿色流向它们附着的粉红色。所有这些链接的长度都应该一致。
- 黄色应该从橙色开始做同样的事情。
只要没有附加其他十六进制，我就能够实现#1。我想如果我能让这 4 组不受彼此物理的影响，我就能得到我正在寻找的东西。白色和粉红色以及黄色和粉红色之间的连接可以比白色和橙色之间的连接更长，以使其“适合”。
有 4physics: false个节点连接到绿色、左粉色、橙色和所有三个蓝色。该fixed属性似乎更合适，但是当以这种方式定位时，节点似乎忽略了xandy值。这些用于将图形拉成形状。我也对替代方法持开放态度。
有没有另一种方法来实现我正在寻找的东西？至少有没有办法强制粉红色节点更喜欢水平运行？
我尝试了各种物理求解器。默认的 barnesHut 是我目前使用的。
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 在 chrome 中渲染