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

最新推荐文章于 2026-04-12 23:26:14 发布

原创

最新推荐文章于 2026-04-12 23:26:14 发布 · 2k 阅读

标签

#Vue #D3

本文介绍了在Vue项目中使用D3.js绘制导图时遇到的点击事件无法与Vue组件交互的问题。问题根源在于事件监听器中的`this`指向错误，即指向了D3的上下文而非Vue组件。为解决此问题，作者提出了在代码顶部声明一个`that`变量保存`this`的正确指向，以此保持对Vue组件上下文的访问，从而实现点击事件的正常交互。

不知道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")
         .attr