提问人：Rohit Chakraborty 提问时间：6/30/2023 最后编辑：Rohit Chakraborty 更新时间：6/30/2023 访问量：29
想要在 fetch 函数之后初始化一个变量，以便稍后包含在 Layout 中
Want to initialize a variable after a fetch function to later include in the Layout
问：
我们设置了一个名为 processInput（） 的函数来返回 sliders 变量。此滑块变量必须在 fetch 函数之后重用。我们还希望在 Layout 变量中包含 sliders 变量以形成网格网络。
但是我们在从 processInput 函数检索数据并在代码的后面部分使用它时遇到了问题。我们无法同时使用滑块以及最终用户将传递的输入。请帮助我们解决问题。
以下是我们应用程序的完整代码：
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
Visualization
</title>
<link rel="stylesheet" href="style.css">
<script src="https://cdn.plot.ly/plotly-1.58.5.min.js"></script>
<!--<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/FileSaver.min.js"></script>-->
<style>
#format-select,
#download-btn{
position: absolute;
top: 25;
left: 0;
}
#format-select {
position: absolute;
top: 50;
left: 0;
}
#quantity {
position: absolute;
top: 75;
left: 0;
}
#submit {
position: absolute;
top: 100;
left: 0;
}
#quantity2 {
position: absolute;
top: 125;
left: 0;
}
#submit2 {
position: absolute;
top: 150;
left: 0;
}
.graph-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
position: relative;
}
.main-panel {
width: 100%;
height: 800px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.side-panel {
position: fixed;
top: 0;
bottom: 0;
right: -300px;
width: 300px;
background-color: #f2f2f2;
transition: right 0.5s;
overflow-y: auto;
padding: 20px;
}
.side-panel.open {
right: 0;
}
.arrow {
position: absolute;
top: 20px;
left: 20px;
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-right: 20px solid #2196F3;
cursor: pointer;
}
.arrow.open {
transform: rotate(180deg);
}
</style>
</head>
<body>
<div class="graph-container">
<div id="network" class="main-panel">
</div>
<div id="graph" class="side-panel">
<div class="arrow"></div>
</div>
</div>
<label for="quantity"> Enter the value </label>
<input type="text" id="quantity" >
<button id = "submit" onclick="processInput()">Submit</button>
<label for="quantity"> Enter the value </label>
<input type="text" id="quantity2" >
<button id = "submit2" onclick="updateFont()">Submit</button>
<!-- Buttons for downloading the graphs -->
<label for="format-select">Format:</label>
<select id="format-select">
<option value="png">PNG</option>
<option value="svg">SVG</option>
<option value="jpeg">JPEG</option>
</select>
<button id="download-btn">Download</button>
<div id="main">
<!-- <button class="openbtn" onclick="openNav()">☰ Open Sidebar</button> -->
</div>
<script>
// Function to make a variable and store the value through the input that we provide
var fontSize;
function updateFont(){
var fontSize = document.getElementById("quantity2").value;
//return fontSize;
console.log(fontSize);
}
//var input;
// Function to take the input and change the size of the arrows with the help of the slider
function processInput(input, ncones) {
//var input = Math.floor(document.getElementById("quantity").value);
//var input = 42.5;
//
console.log(input);
var nscale = [input * 0.1, input, input * 10];
var steps = [];
for (var i = 0; i < nscale.length; i++) {
var visible = Array(ncones).fill(true); // all cones
// visible[0] = true; // set the 0th cone to be visible
var step = { method: "update", args: [{ visible: visible, sizeref: nscale[i] }], label: nscale[i] };
steps.push(step);
}
var sliders = {
x: 0.1,
y: 12.0,
len: 0.8,
pad: { t: 50 },
steps: steps,
}
console.log(sliders);
console.log(nscale);
console.log(steps);
return sliders;
//return input;
}
function openNav() {
document.getElementById("graph").style.width = "500px";
document.getElementById("main").style.marginLeft = "500px";
}
function closeNav() {
document.getElementById("graph").style.width = "0";
document.getElementById("main").style.marginLeft= "0";
}
const sidepanel = document.querySelector('.side-panel');
const arrow = document.querySelector('.arrow');
arrow.addEventListener('click', function() {
sidepanel.classList.toggle('open');
arrow.classList.toggle('open');
});
//read the data from the json file
fetch("result_0.json")
.then(response => response.json())
.then( data => {
var ncones = data.ncones;
var x = data.x;
const input = document.getElementById("quantity").value;
console.log(input);
sliders = processInput(input, ncones);
//Initializing array for storing the variables
var layout = {
updatemenus: [
{
x: 1.5,
y: 15.5,
yanchor: "top",
xanchor: "left",
showactive: false,
direction: "Right",
height: 8000,
width: 8000,
buttons: [
{
method: "restyle",
label: "Velocity"
},
{
method: "restyle",
label: "Pressure"
},
],
},
],
scene: {
xaxis: { title: { text: "X Axis Label", font: { size: fontSize } } },
yaxis: { title: { text: "Y Axis Label", font: { size: fontSize } } },
zaxis: { title: { text: "Z Axis Label", font: { size: fontSize } } },
},
sliders: [sliders], // add the slider to the layout
};
Plotly.newPlot('network', data, layout)
var formatSelect = document.getElementById('format-select');
var downloadBtn = document.getElementById('download-btn');
downloadBtn.addEventListener('click', function() {
var format = formatSelect.value;
Plotly.toImage('network', {format: format, width: 800, height: 600})
.then(function(url) {
var link = document.createElement('a');
link.download = 'chart.' + format;
link.href = url;
link.click();
});
});
})
</script>
</body>
</html>
已使用的 JSON 文件：
{
"ncones": 63,
"x": [
1011.06536865234,
950.190307617188
]
}
要寻找的重点领域：
在标签后转到 processInput（）
- 标记后，定义了 processInput 函数
- fetch 函数后滑块变量的初始化
- 在 Layout 变量中包含滑块变量
答： 暂无答案
评论