VUE - D3 导图 点击事件无法与外部交互的问题 已解决 底部是解决方案

不知道VUE是什么的，百度；
不知道d3.js是什么的，百度；
都知道的，请看代码：

<template>
    <div>

        <svg width="500" height="500"></svg>
      </div>
</template>
<script>
 export default {
   
    layout:'backMgr',
 
  data() {
   
    return {
   
      
        dat:  {
   
            "id": 4,
            "name": "张三",
            "children": [
                {
   
                    "id": 1,
                    "role": "ROLE_READ",
                    "remark": "读取"
                },
                {
   
                    "id": 4,
                    "role": "ROLE_DELETE",
                    "remark": "删除"
                },
                {
   
                    "id": 3,
                    "role": "ROLE_WRITE",
                    "remark": "写入"
                },
                {
   
                    "id": 5,
                    "role": "ROLE_LOGIN",
                    "remark": "登录"
                },
                {
   
                    "id": 6,
                    "role": "ROLE_ANONYMOUS",
                    "remark": "未登录可以获取"
                }
            ]
        }
    }
  },
  methods: {
   
    /* 绘制图表 */
    drawChart(data) {
   
      
      let svg = this.$d3.select("svg")
      let width = +svg.attr("width")
      let height = +svg.attr("height")
      let g = svg.append("g").attr("transform", "translate(100,0)")

      let tree = this.$d3.tree().size([height, width - 250])

      let root = this.$d3.hierarchy(data)
      tree(root)
      
    //设置颜色比例尺
      let colorScale = this.$d3.scaleOrdinal().domain(this.$d3.range(data.length)).range(this.$d3.schemeCategory10)

     let link = g.selectAll(".link")
        .data(root.descendants().slice(1))
        .enter().append("path")
        .attr("class", "link"