Due SVG 요소에 Vue.js v-on 이벤트 추가

D3의 SVG 요소에 VueJS v-on 이벤트를 추가 할 수 있습니까? SVG의 각 사각형 요소에 v-on.mouseover 기능을 사용하고 싶습니다. 나는 다음 코드에서와 같이, D3의 속성으로 v-on:mouseover="active = !active"을 추가하여 그렇게하려고 :Due SVG 요소에 Vue.js v-on 이벤트 추가

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">

출처

2017-11-21 SteveSong

문제로 남아 있어요 콜론이 일반적으로 네임 스페이스를 정의하고 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>

출처

2017-11-21 00:58:55

감사 제럴드 :

여기

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

데모입니다! 이는 실제로 속성을 정확하게 나열하는 문제를 해결합니다. 슬프게도 vue.js는 더 이상이 상황에서 v-on 지시어를 해석하지 않습니다. 두 가지를 통합하는 방법에 관해서는 틀린 길에 있어야합니다. – SteveSong

예, 속성이 설정 될 것이라고 생각하지만 작동하지 않습니다 ... 불행히도 저는 Vue 사용자가 아닙니다. 어쨌든 이제 D3에서 콜론 앞에있는 모든 것이 네임 스페이스라고 생각합니다. –

당신은 질문에 절대적으로 정확하게 대답했지만 누군가가 올바른 방향으로 나를 가리킬 것이라는 희망으로 잠시 동안 선택하지 않은 채로 두려고합니다. – SteveSong

Due SVG 요소에 Vue.js v-on 이벤트 추가

답변

관련 문제