javascript - 如何在D3附加的vue.js对象上启用v-on事件

我正在使用c3构建图表，然后使用d3在此图表之上添加div：

请参阅jsfiddle上的工作示例。

var naviChart = d3
  .selectAll("#chart")
  .append("div")
  .attr("class", "hist-future-btn");
naviChart
  .append("div")
  .text("Hist")
  .attr("class", "hist")
  .attr(":v-on:click", "showHistChart");

即使代码生成正确（通过Chrome检查器检查）：

<div class="hist" @click="showHistChart">Hist</div>

函数showHistChart不被调用。
我将上述行从Chrome检查器复制粘贴到了HTML代码的底部，然后可以正常工作。因此，我们知道d3会正确生成代码，但未启用vue事件

如何在vue.js动态添加的对象上启用d3.js？

我发现了这个topic，问题非常相似，但它只能回答热点问题，以启用svg元素上的事件，并在注释中打开我的问题。

最佳答案

将.attr(":v-on:click", "showHistChart");替换为.on("click", this.showHistChart);，其中this.showHistChart表示vue实例中的方法。