DOM要素をVue.jsコンポーネントに変換

Question

私はVue.jsアプリケーションで複雑なビジュアライゼーションを作成するためにd3.jsプラグインを使用しています。 d3プラグインによって追加された要素にカスタムvueディレクティブを適用したいと思います。
vue2で廃止された$コンパイル機能は、私が探しているものです。

domからvueコンポーネントの要素を動的に変更するにはどうすればよいですか？

Answer 1

お探しの物件は$mountedです。キーmountedに機能を提供すると、d3の視覚化をインスタンス化できます。

<template> 
    <svg width="500" height="300"></svg> 
</template> 

<script> 
const d3 = require('d3'); 
export default { 
    mounted: function() { 
    // this.#el - is the root element in <template> 
    // in this case it is <svg> tag 
    d3.select(this.$el) 
     .append('circle') 
     .attr('cx', '250') 
     .attr('cy', '150') 
     .attr('r', '100') 
    } 
} 
</script>