0
Je travaille sur une page Web qui utilise Vis.js pour créer un graphique de mots. Mais la chose est que le niveau de zoom par défaut, il est très difficile de voir les mots: 
Mais si j'augmente le niveau de zoom, alors les choses fonctionnent bien: 
Je veux vraiment augmenter le niveau de zoom par défaut, donc qu'un utilisateur n'a pas à zoomer sur le graphique de mots. S'il vous plaît aidez-moi, je vous remercie beaucoup: Voici le code: (j'ai posté une démo en ligne: http://word-graph-example.co.nf/index.html) Vis.js augmenter le niveau de zoom par défaut du graphique de mot (module réseau)
<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>
Le code pour tripotant avec les options:
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
}
s'il vous plaît aidez-moi, je vous remercie beaucoup :)