d3.js - 将 Vue.js v-on 事件添加到 D3 SVG 元素

Question

是否可以将 VueJS v-on 事件添加到 D3 中的 SVG 元素？我想对 SVG 的每个矩形元素使用 v-on.mouseover 功能。我试图通过添加 v-on:mouseover="active = !active" 作为 D3 中的属性来实现这一点，如以下代码片段所示:

h.selectAll('.bar')
  .data(myCSVdata)
  .enter()
  .append('g')
  .attr('v-on:mouseover', 'active = !active')
  .attr('class', 'bars')
  .append('rect')

但 D3 似乎去掉了 v-on: 我只剩下

<g mouseover="active = !active" class="bars">

Answer 1

这里的问题...

.attr('v-on:mouseover', 'active = !active')

...是冒号正常定义命名空间，D3会认为v-on是命名空间。

但有一个解决方案:在它之前添加另一个冒号。

.attr(':v-on:mouseover', 'active = !active')
//     ^---- extra colon here

这是一个演示:

var div = d3.select("body")
  .append("div")
  .attr(':v-on:mouseover', 'active = !active');
  
console.log(div.node())

<script src="https://d3js.org/d3.v4.min.js"></script>