Adding a Vue.js v-on event to D3 SVG element

问题

Is it possible to add a VueJS v-on event to an SVG element in D3? I want to use the v-on.mouseover functionality to each rectangle element of an SVG. I am trying to do so by adding v-on:mouseover="active = !active" as an attribute in D3, as in the following snippet:

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

but D3 seems to strip out the v-on: and I am left with

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

回答1:

The problem here...

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

... is that the colon normally defines the namespace, and D3 will think that v-on is a namespace.

There is a solution, though: add another colon before it.

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

Here is a demo:

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>

来源：https://stackoverflow.com/questions/47403544/adding-a-vue-js-v-on-event-to-d3-svg-element