d3.js回调函数点击事件中未定义数据值

Question

我正在尝试将值传递给绑定到由圆圈和字母组成的组的 d3 单击事件。但是，此值在回调函数中仍为“undefined”。另一方面，如果我将相同的值传递给同一组的另一个函数，例如 .text(d => d.value) 工作正常。问题仅与点击事件有关。请找到我的一段代码：

//The parent svg
var s = d3.select("#"+this.id) //this refers to the current object
        .append("svg")
        .attr("id",this.svgid)
        .attr("width","100%")
        .attr("height","100%");

//The value to be passed to the click event
const dd = [{value:"whatever"}];
            
var group1 = s.data(dd).append("svg:g");

//First element of the group = a circle
group1.append("svg:circle")
        .attr("cx","85%")
        .attr("cy","20%")
        .attr("r","10px")
        .attr("fill","#FFFFFF");

//Second element of the group = letter i
group1.append("svg:text").text("i")
        .attr("x","85%")
        .attr("y","25%")
        .attr("fill","#555555");

group1.append("svg:text").text(d => d.value).attr("x","50%").attr("y","50%");//This line works fine

group1.on("click",d => console.log(d.value));//This line returns 'undefined'--> Why?

我尝试了几种回调函数，例如 function(d){console.log(d.value);} 但没有成功。有什么想法吗？

Answer 1

替换

group1.on("click",d => console.log(d.value));

和

group1.on("click",(e, d) => console.log(d.value));

从 D3 V6 开始，事件作为鼠标事件回调的第一个参数传递

d3.js回调函数点击事件中未定义数据值

d3.js undefined data value in callback function click event

events

callback

d3.js