使用自定义 d3 事件更新 Vue 触发器答案

【问题标题】：Vue trigger update with custom d3 event使用自定义 d3 事件更新 Vue 触发器
【发布时间】：2018-07-22 17:37:28
【问题描述】：

tl;dr: 在我的Vue.js 应用程序中，我必须在d3 事件dispatch 更改属性后触发多个组件中的每一个进行更新，但只有“最终”一个反应。

在我的应用程序中，有一个 Loc 组件，在单独的 Chart 组件中包含 23 个 d3 可视化，每个组件包含 47 个 <a> 标记（数据点）。

将鼠标悬停在每个 <a> 上必须触发在 Tip 组件中定义的不同 Semantic-UI popup。

总之应该有 (47 * 23) Tip 组件，但只有 (47 * 1) 被渲染。评估 Tip 的生命周期挂钩表明只有 (47 * 1) 正在创建和挂载。

似乎即使有 23 个 Chart 实例，并且 renderComplete 定义在 data 函数中，它也只反应一次。

伪应用看起来像这样：

<Loc>
  <Chart v-for="..."> <!-- n=23 -->
    <svg :id=uuid></svg>
    <div v-if="renderComplete">
      <Tip v-for="..."> <!-- n1=47 -->

每个 d3 即在完成渲染时调度一个自定义 completed 事件。

Chart 定义为Base 的扩展。 Base 包含renderComplete 的定义和事件监听器：

// Base.vue
data() {
 return {
    renderComplete: false
  }
},  
mounted() {
  this.myprop.on('completed.vz',(d)=>{
    this.renderComplete = true
    console.log(this.renderComplete)
  })
}

所有可视化呈现，但仅在Chart 23 of 23 中的Tip 组件被呈现。前 22 次失败。控制台输出指示事件已被调度，并且侦听器执行了 23 次。（renderComplete 被报告了 23 次 true 预期）

我尝试将renderComplete 设为computed，并尝试将on 声明放入created。我还尝试过多次迭代 Base 和 Chart 中的声明，但在每种情况下，它要么不起作用，要么崩溃。

您可以提供的任何见解都将是最有帮助的。谢谢！

【问题讨论】：

这个例子和你的应用类似吗？ jsfiddle.net/maxsinev/d7c1ujgp
哇，麦克斯，小提琴真棒！非常相似的是（并且有效！）关键差异可能会解释问题，例如，事件而不是超时，vuex对象中的数据，即chart = { code : [tips] }，所以<Tip v-for="tip in chart[code]>。我认为概率可能与code 的值有关，但即正确使用它。从表面上看，唯一不起作用的就是如前所述。
所以<div v-if="renderComplete"> 和<Tip v-for...> 在图表组件内（提示作为道具传递）或者您使用插槽？
你的问题的答案基本上是前者。在伪块中，'Chart'组件基本上被定义为已写入。提示内容从 vuex 访问。

标签： javascript events d3.js vue.js

【解决方案1】：

我发现了问题所在。是个面子。

包含 d3 函数的模块正在使用 require 加载，导致它的单个实例。多次使用它只会重置其状态。在renderComplete 上对Chart 的第一个实例进行后处理只是简单地引用了具有来自最终迭代的状态属性的单例。

为了解决问题，我将d3chart.js重构为es6 class，调用new，不再绑定component声明：

老办法

在Loc 中的Chart 使用声明中：

<component :is="Chart" :myprop="myprop"></component>

在Loc 定义中：

data() {
  return {
    myprop: require('@/viz/d3chart.js')
  }
}

新方式

<component :is="Chart"></component>

和

import myprop from '@/viz/d3chart.js'
... 
data() {
  return {
    myprop: new myprop()  
  }
}

感谢您的帮助！

【讨论】：