是否有一种方法在Vis.js保持节点在相同的大小，同时放大/缩小?

Question

我想知道是否有一种方法来保持节点的大小，在Vis.js网络中，总是在相同的大小，同时放大/缩小

选项

{
size: 10,
scaling: {
min: 10,
max: 10
}
}

但是这个设置根本不起作用，我也尝试过

customScalingFunction: function (min,max,total,value) {
return 1;
}

认为这个函数会在任何时候重新呈现网络时运行。

Answer 1

这可以通过在网络缩放时更改nodes.size和nodes.font.size选项来实现。这些选项的详细信息可以在这里的文档中找到，缩放事件的详细信息可以在这里找到。根据文档，nodes.size选项仅适用于内部没有标签的形状。

调整缩放大小的示例片段:

// create an array with nodes
let nodes = new vis.DataSet([
{ id: 1, label: "Node 1" },
{ id: 2, label: "Node 2" },
{ id: 3, label: "Node 3" },
{ id: 4, label: "Node 4" },
{ id: 5, label: "Node 5" },
]);
// create an array with edges
let edges = new vis.DataSet([
{ from: 1, to: 3 },
{ from: 1, to: 2 },
{ from: 2, to: 4 },
{ from: 2, to: 5 },
{ from: 3, to: 3 },
]);
// create a network
const container = document.getElementById("mynetwork");
const data = {
nodes: nodes,
edges: edges,
};
let options = {
nodes: {
shape: 'dot',
size: 10,
font: {
size: 10
}
}
};
const network = new vis.Network(container, data, options);
// Set the initial node size once before network is drawn
network.once("beforeDrawing", function() {
setNodeSize(network.getScale());
}); 
// Adjust size on zoom
network.on("zoom", function (params) {
setNodeSize(params.scale);
});
function setNodeSize(scale){
// Update node size dependent on scale
options.nodes.size = (10 / scale);
options.nodes.font.size = (10 / scale);
network.setOptions(options);
}

#mynetwork {
width: 600px;
height: 160px;
border: 1px solid lightgray;
}

<script src="https://visjs.github.io/vis-network/standalone/umd/vis-network.min.js"></script>
<div id="mynetwork"></div>

关于缩放选项，我不相信它们可以用来实现这一点。缩放是相对于网络上的其他节点，而不是视口/缩放。下面是一个快速示例，说明如何更改缩放值https://jsfiddle.net/34b682qs/。单击该按钮将按10到20的顺序切换每个节点设置的缩放值。当所有节点具有相同的值时，无论该值是10还是20，网络都会将它们全部缩放为相同的大小。因此，在缩放时调整这个值是没有效果的。