我正在开发一个使用 Vis.js 创建单词图的网页。但问题是，使用默认缩放级别，很难看到以下文字：
但是如果我增加缩放级别，那么一切正常：
所以我真的想增加默认缩放级别，这样用户就不会必须放大单词图。请帮助我，非常感谢：这是代码：（我也在网上发布了一个演示：http ://word-graph-example.co.nf/index.html ）
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>DEMO</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.css"></script>
</head>
<body>
<div id = "word_graph" style = "height: 500px;" class = "display" width = "100%"></div>
<script>
// Word graph (hacked from http://132.234.113.15:3000/getWordsGraph)
var network;
var allNodes;
var allEdges;
var highlightActive = false;
var nodesDataset;
var edgesDataset;
function redrawAll() {
var container = document.getElementById('word_graph');
var options = {
height: '100%',
nodes: {
shape: 'circle',
scaling: {
min: 10,
max: 30,
label: {
min: 8,
max: 30,
drawThreshold: 2,
maxVisible: 200
}
},
font: {
size: 12,
face: 'Tahoma'
}
},
edges: {
width: 1,
color: {
inherit: 'source'
},
smooth: {
type: 'continuous'
}
},
interaction: {
tooltipDelay: 200,
hideEdgesOnDrag: false
},
layout: {
improvedLayout: false
},
physics: {
//enabled: false,
stabilization: {
iterations: 500
},
barnesHut: {
gravitationalConstant: -25000,
centralGravity: 0.05,
//centralGravity: 0,
avoidOverlap: 1
},
solver: 'barnesHut',
minVelocity: 0.75
},
start: {
zoomMin: 3
}
};
var jsonData = ....... // http://word-graph-example.co.nf/index.html for more information about the data, you can get it from that page :(
nodesDataset = new vis.DataSet(jsonData.nodes);
edgesDataset = new vis.DataSet(jsonData.edges);
var data = {nodes:nodesDataset, edges:edgesDataset};
network = new vis.Network(container, data, options);
// get a JSON object
// get a JSON object
allNodes = nodesDataset.get({returnType:"Object"});
allEdges = edgesDataset.get({returnType:"Object"});
//network.focusOnNode(1,{scale: 2});
network.on("click", neighbourhoodHighlight);
}
function neighbourhoodHighlight(params) {
// if something is selected:
if (params.nodes.length > 0) {
highlightActive = true;
var i,j;
var selectedNode = params.nodes[0];
// mark all nodes as hard to read.
for (var nodeId in allNodes) {
allNodes[nodeId].color = 'rgba(200,200,200,0.5)';
if (allNodes[nodeId].hiddenLabel === undefined) {
allNodes[nodeId].hiddenLabel = allNodes[nodeId].label;
allNodes[nodeId].label = undefined;
}
}
for(var edgeId in allEdges){
if(allEdges[edgeId].hiddenLabel === undefined){
allEdges[edgeId].hiddenLabel = allEdges[edgeId].label;
allEdges[edgeId].label = undefined;
}
}
var connectedNodes = network.getConnectedNodes(selectedNode);
var connectedEdges = network.getConnectedEdges(selectedNode);
// all first degree nodes get a different color and their label back
for (i = 0; i < connectedNodes.length; i++) {
allNodes[connectedNodes[i]].color = 'rgba(51, 204, 51,0.75)';
if (allNodes[connectedNodes[i]].hiddenLabel !== undefined) {
allNodes[connectedNodes[i]].label = allNodes[connectedNodes[i]].hiddenLabel;
allNodes[connectedNodes[i]].hiddenLabel = undefined;
}
}
// all first degree edges
for (i = 0; i < connectedEdges.length; i++) {
if (allEdges[connectedEdges[i]].hiddenLabel !== undefined) {
allEdges[connectedEdges[i]].label = allEdges[connectedEdges[i]].hiddenLabel;
allEdges[connectedEdges[i]].hiddenLabel = undefined;
}
}
// set the color for the main(clicked) node
allNodes[selectedNode].color = 'rgba(255, 51, 0, 0.75)';
if (allNodes[selectedNode].hiddenLabel !== undefined) {
allNodes[selectedNode].label = allNodes[selectedNode].hiddenLabel;
allNodes[selectedNode].hiddenLabel = undefined;
}
}
else if (highlightActive === true) {
// reset all nodes
for (var nodeId in allNodes) {
allNodes[nodeId].color = undefined;
if (allNodes[nodeId].hiddenLabel !== undefined) {
allNodes[nodeId].label = allNodes[nodeId].hiddenLabel;
allNodes[nodeId].hiddenLabel = undefined;
}
}
for (var edgeId in allEdges) {
allEdges[edgeId].color = undefined;
if (allEdges[edgeId].hiddenLabel !== undefined) {
allEdges[edgeId].label = allEdges[edgeId].hiddenLabel;
allEdges[edgeId].hiddenLabel = undefined;
}
}
highlightActive = false
}
// transform the object into an array
var nodeUpdateArray = [];
for (nodeId in allNodes) {
if (allNodes.hasOwnProperty(nodeId)) {
nodeUpdateArray.push(allNodes[nodeId]);
}
}
nodesDataset.update(nodeUpdateArray);
var edgeUpdateArray = [];
for (edgeId in allEdges) {
if (allEdges.hasOwnProperty(edgeId)) {
edgeUpdateArray.push(allEdges[edgeId]);
}
}
edgesDataset.update(edgeUpdateArray);
}
redrawAll();
var selectedNode = network.selectNodes(['580']); // GreatBarrierReef
console.log(selectedNode);
</script>
</body>
</html>
使用选项的代码：
var options = {
height: '100%',
nodes: {
shape: 'circle',
scaling: {
min: 10,
max: 30,
label: {
min: 8,
max: 30,
drawThreshold: 2,
maxVisible: 200
}
},
font: {
size: 12,
face: 'Tahoma'
}
},
edges: {
width: 1,
color: {
inherit: 'source'
},
smooth: {
type: 'continuous'
}
},
interaction: {
tooltipDelay: 200,
hideEdgesOnDrag: false
},
layout: {
improvedLayout: false
},
physics: {
//enabled: false,
stabilization: {
iterations: 500
},
barnesHut: {
gravitationalConstant: -25000,
centralGravity: 0.05,
//centralGravity: 0,
avoidOverlap: 1
},
solver: 'barnesHut',
minVelocity: 0.75
},
start: {
zoomMin: 3
}
请帮助我，非常感谢你:)