如何在D3.js的.on()点击函数中访问Pinia的action方法

你可以通过以下两种方式解决作用域冲突的问题：

方法1：保存Store实例的引用 #

在d3Action函数内部先把Pinia store的实例引用存下来，在D3的点击回调里用这个引用调用action，同时保留this指向DOM元素：

export const useStore = defineStore('myStore', {
    actions: {
        piniaAction() {
            // 你的逻辑代码
        },
        d3Action() {
            // 保存store实例的引用到变量self
            const self = this;
            const svg = d3.select("#id")
            const group = svg.append("g")
            group.append("rect")
               .on("click", function(){
                   let myRect = d3.select(this); // 正常获取SVG元素
                   self.piniaAction(); // 通过self调用Pinia的action
                })
         }
     }
})

方法2：使用箭头函数+D3事件对象 #

箭头函数不会绑定自己的this，它会继承外部作用域的this（也就是Pinia store实例），同时通过D3的事件参数获取当前点击的DOM元素：

export const useStore = defineStore('myStore', {
    actions: {
        piniaAction() {
            // 你的逻辑代码
        },
        d3Action() {
            const svg = d3.select("#id")
            const group = svg.append("g")
            group.append("rect")
               .on("click", (event) => {
                   // 通过event.currentTarget获取点击的SVG元素
                   let myRect = d3.select(event.currentTarget); 
                   this.piniaAction(); // 直接调用Pinia的action，this指向store实例
                })
         }
     }
})

注意：如果使用的是D3 v5及更早版本，事件对象需要通过d3.event获取，而不是作为参数传入，此时箭头函数里可以用d3.event.currentTarget来获取元素。

内容的提问来源于stack exchange，提问作者Yolo_chicken