Question

每当用户从与特定轴相对应的下拉列表中选择一个值时，我都试图使Plotly图表中X和Y轴的源数据自动更新。

事件侦听器存在问题（以下代码的最后两行）：

function restyle(chart_div, update_data) {
            console.log(update_data.x);
            Plotly.restyle(chart_div, update_data);

    };

var update_data = {
    x: [columns[controls.x_axis_dropdown.value]], 
    y: [columns[controls.y_axis_dropdown.value]], 
};

controls['x_axis_dropdown'].addEventListener("change", function(){restyle(chart_div, update_data)});
controls['y_axis_dropdown'].addEventListener("change", function(){restyle(chart_div, update_data)});

问题在于，当前只要用户更改下拉值，在确实更改下拉值之前就调用restyle函数。结果，图表保持不变。

更改下拉值后如何调用restyle函数？因此，除了需要事件侦听器上的“ change”事件外，我还需要“ afterChange”事件之类的东西。

Answer 1

也许您需要直接从下拉元素中获取值。使用调用了回调函数的事件对象来检索目标元素的相关值。

controls['y_axis_dropdown'].addEventListener("change", function(event){
    const update_data = event.target.whatever_data;
    restyle(chart_div, update_data)
});

Answer 2

您的问题应该出在这部分

var update_data = {
    x: [columns[controls.x_axis_dropdown.value]], 
    y: [columns[controls.y_axis_dropdown.value]], 
};

由于更新仅设置一次，因此x和y值是恒定的

尝试将代码更改为：

function restyle(chart_div) {
      var update_data = {
           x: [columns[controls.x_axis_dropdown.value]], 
           y: [columns[controls.y_axis_dropdown.value]], 
       };
            console.log(update_data.x);
            Plotly.restyle(chart_div, update_data);

    };

controls['x_axis_dropdown'].addEventListener("change", function(){restyle(chart_div)});
controls['y_axis_dropdown'].addEventListener("change", function(){restyle(chart_div)});

Answer 3

我最终使用了超时，而且效果很好：

document.addEventListener("change", function(e) {
  /*
   * We use a timeout here to simulate an "afterChange" event.
   * This allows us to read directly from the DOM instead of
   * having to read from the event, which would require a lengthier code
   * to account for all elements we might want to read.
   */
  setTimeout(function() {
    // Do something after change.
  }, 100);
});

是否有类似“ afterChange”事件而不是Javascript中的“ change”事件？

3 个答案: