Vis.js Per Group Physics
我首先要描述一下我想要实现的目标。附图是我得到的最接近的图像。
- 3个蓝色六边形应全部接触。
- 粉红色的Hexes应该全部水平运行。
- 白色（和一个红色）应该像从绿色到粉红色一样大致流动。所有这些链接的长度应该是统一的。
- 从橙色开始，黄色应该是相同的。
只要没有附加其他六边形，我就能够达到＃1。我想我能得到我正在寻找的东西，如果我能让4组不受彼此物理影响那么多。白色和粉红色以及黄色和粉红色之间的连接可以比白色和橙色之间的连接更长，以使其“适合”。
有4个physics: false个节点连接到绿色，左边是粉红色，橙色和所有三个蓝色。 fixed属性似乎更合适，但当以这种方式定位时，节点似乎忽略了x和y值。这些用于将图形拉成形状。我也愿意接受其他方式。
还有另一种方法可以实现我正在寻找的东西吗？至少有一种方法可以强制粉红色节点更喜欢水平运行吗？
我尝试了各种物理解算器。默认的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中渲染
0 个答案:
没有答案
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？