Javascript 无法覆盖plotly.js上的新图形_Javascript_Html_Plotly_Plotly.js

Javascript 无法覆盖plotly.js上的新图形

javascript html

Javascript 无法覆盖plotly.js上的新图形,javascript,html,plotly,plotly.js,Javascript,Html,Plotly,Plotly.js,嗨，我需要每次移动滑块时都重新绘制我的图形函数。似乎newPlot应该做到这一点，但它没有做到（我也尝试过重画），这是代码，我希望你会喜欢它，并请找到一个解决方案。谢谢大家这里我画了第一张图这将更新值n //更新图形函数更新（）{ var r=document.getElementById（“lambdasler”）.value； var exp=“Math.exp（k）”；对于（var x=-11；x <!DOCTYPE html> <html lang="

嗨，我需要每次移动滑块时都重新绘制我的图形函数。似乎newPlot应该做到这一点，但它没有做到（我也尝试过重画），这是代码，我希望你会喜欢它，并请找到一个解决方案。谢谢大家

这里我画了第一张图

这将更新值n

//更新图形
函数更新（）{
var r=document.getElementById（“lambdasler”）.value；
var exp=“Math.exp（k）”；
对于（var x=-11；x
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<script src="plotly-latest.min.js"></script>
</head>
<body>
<div id="tester" style="width:1000px; height:600px;"></div>

<p> r:<span id="sliderAmount"></span></p>
<p> <input id='lambdaSlider' type="range" min ='-5' max = '5' step = '0.5' value = '1'></input></p>

<script src="./js/plotly_funfamily.js"></script>
</body>

<script>
TESTER = document.getElementById('tester');

var r = document.getElementById("lambdaSlider").value;//TAKES R VALUE FROM SLIDER

//GETS THE VALUES
var exp="Math.exp(k)";
var xValues = [];
var yValues = [];

for (var x = -11; x <= 11; x += 0.1) {
var k=r*x;
xValues.push(x);
yValues.push(eval(exp));}

var trace_init = {x:xValues, y:yValues, mode:"lines"};
var data = [trace_init];

var layout = {
autosize: false,
margin: {l: 50, r: 50, b: 50, t: 0, pad: 2},
//paper_bgcolor: '#7f7f7f',
//plot_bgcolor: '#c7c7c7',
//width: 500,
//height: 500,
xaxis: {
range: [-10, 10],
autotick: false,
ticks: 'outside',
tick0: 0,
dtick: 1,
ticklen: 7,
tickwidth: 1,
tickcolor: '#000',
showgrid: true,
zeroline: true,
//showline: true,
//gridcolor: '#bdbdbd',
gridwidth: 1,
//zerolinecolor: '#969696',
zerolinewidth: 1,
//linecolor: '#636363',
//linewidth: 6
nticks: 20,
domain: [1, 1], //mantiene il rapporto 1:1 fra x e y
},
yaxis: {
range: [-1, 10],
autotick: false,
ticks: 'outside',
tick0: 0,
dtick: 1,
ticklen: 7,
tickwidth: 1,
tickcolor: '#000',
showgrid: true,
zeroline: true,
//showline: true,
//gridcolor: '#bdbdbd',
//gridwidth: 2,
//zerolinecolor: '#969696',
zerolinewidth: 1,
//linecolor: '#636363',
//linewidth: 6
scaleanchor: "x",
domain: [1, 1],
}

};

Plotly.newPlot( TESTER, data, layout, {scrollZoom: true, displaylogo: false,
modeBarButtonsToRemove['toImage','zoom2d','zoomIn2d',
'zoomOut2d','select2d','lasso2d','resetViews','toggleSpikelines','hoverClosestCartesian',
'hoverCompareCartesian','resetScale2d','autoScale2d']});

//UPDATES THE GRAPH
function update(){
var r = document.getElementById("lambdaSlider").value;
var exp="Math.exp(k)";
for (var x = -11; x <= 11; x += 0.1) {
var k=r*x;
xValues.push(x);
yValues.push(eval(exp));}
data1 = [{x:xValues, y:yValues, mode:trace_init.mode}];
Plotly.newPlot('tester', data1, layout, {scrollZoom: true, displaylogo: false,
modeBarButtonsToRemove: ['toImage','zoom2d','zoomIn2d',
'zoomOut2d','select2d','lasso2d','resetViews','toggleSpikelines','hoverClosestCartesian',
'hoverCompareCartesian','resetScale2d','autoScale2d']});}

// CHANGES OF THE SLIDER
var slide = document.getElementById('lambdaSlider');
var sliderDiv = document.getElementById("sliderAmount");

sliderDiv.innerHTML = document.getElementById('lambdaSlider').value;

slide.oninput = function() {
sliderDiv.innerHTML = this.value;
update(this.value)}

</script>

</html>