调用Dygraph的updateOptions()时interactionModel不更新问题问询

问题原因 #

Dygraph 在初始化阶段就会根据传入的 interactionModel 绑定对应 DOM 事件监听器，而官方提供的 updateOptions 方法仅支持更新展示类配置，不会触发事件监听器的重置逻辑，因此动态修改 interactionModel 配置不会生效。

实现方案 #

方案1：销毁重建实例（兼容性最优） #

直接在 editMode 切换时销毁旧的 Dygraph 实例，用最新配置重新初始化即可，不会出现版本兼容问题：

// 销毁已有实例
if (graph.value) {
  graph.value.destroy()
}
// 传入新的交互模型重新初始化
graph.value = new Dygraph(
  你的图表DOM元素,
  图表数据,
  {
    // 其余原有配置保持不变
    interactionModel: newProps.editMode ? DygraphInteraction.nonInteractiveModel_ : DygraphInteraction.defaultModel
  }
)

方案2：手动重置事件绑定（无需重建实例） #

直接修改实例内部的交互模型属性，再调用Dygraph内部方法重置事件监听即可：

// 更新实例内部存储的交互模型
graph.value.interactionModel_ = newProps.editMode ? DygraphInteraction.nonInteractiveModel_ : DygraphInteraction.defaultModel
// 移除原有事件监听
graph.value.detachListeners()
// 绑定新交互模型对应的事件
graph.value.attachListeners()

注意：该方案用到了Dygraph的内部非公开API，不同版本的属性、方法命名可能存在差异，需要结合你使用的版本做适配。

方案3：自定义交互模型加开关 #

不用动态切换交互模型，初始化时直接传入内置状态判断的自定义模型：

const customInteractionModel = {
  ...DygraphInteraction.defaultModel,
  // 重写所有需要拦截的交互事件
  mousedown: (event, g, context) => {
    if (newProps.editMode) return
    DygraphInteraction.defaultModel.mousedown(event, g, context)
  },
  mousemove: (event, g, context) => {
    if (newProps.editMode) return
    DygraphInteraction.defaultModel.mousemove(event, g, context)
  },
  click: (event, g, context) => {
    if (newProps.editMode) return
    DygraphInteraction.defaultModel.click(event, g, context)
  }
}

// 初始化时固定使用该自定义模型即可，无需再调用updateOptions修改交互模型

内容的提问来源于stack exchange，提问作者César