Due SVG要素にVue.js v-onイベントを追加する

Question

D3のSVG要素にVueJS v-onイベントを追加できますか？ SVGの各矩形要素にv-on.mouseover機能を使用したいと思います。私は、次のスニペットのように、D3の属性としてv-on:mouseover="active = !active"を追加することによって、そうしようとしています：

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

問題が残っていますコロンが通常ネームスペースを定義し、D3はv-onがネームスペースであると考えます。

ソリューションがあります：それは前に別のコロンを追加します。

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>