Plotlyjs在用户点击时更新toimage

Question

这是我下面的代码，我想将图像保存在Plotly.toImage中，但只改变布局坐标（中间会有一个基于事件数据改变的白色方块，换句话说就是“

      layout.shapes[0].x0=eventdata["xaxis.range[0]"];"

）这似乎没有任何帮助？

   var img_jpg= d3.select('#jpg-export');

 var img_png= d3.select('#png-export');
 var svg = d3.select('#svg-export');
 var redi= Plotly.newPlot('myDiv', data, layout);
redi.then(
function(gd)
 {
  Plotly.toImage(gd,{height:700,width:700})
     .then(
        function(url)
     {
         img_jpg.attr("src", url);
         Plotly.toImage(gd,{format:'jpeg',height:700,width:700});

     }

     )
});

myDiv.on('plotly_relayout',
function(eventdata){  
    console.log( eventdata["xaxis.range[0]"]);
    console.log(layout.shapes[0]);
   // layout.shapes[0].x0=eventdata["xaxis.range[0]"];
   // layout.shapes[0].x1=eventdata["xaxis.range[1]"];

  Plotly.toImage(redi,{height:700,width:700})
     .then(
        function(url)
     {
         img_jpg.attr("src", url);
         Plotly.toImage(redi,{format:'jpeg',height:700 ,width:700});

     }

     );
    console.log("changes!");
    console.log( eventdata["xaxis.range[0]"]);
    console.log(layout.shapes[0].x0);
    localStorage.setItem("slimshady", JSON.stringify(eventdata));


});