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

标签 d3.js events callback

这个问题在这里已经有了答案:





Unable to get node datum on mouseover in D3 v6

(1 个回答)


6 个月前关闭。




我试图将一个值传递给一个 d3 单击事件绑定(bind)到一个由一个圆圈和一个字母组成的组。然而,这个值在回调函数中保持“未定义”。另一方面,如果我将相同的值传递给同一组的另一个函数,例如 .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);} 但没有成功。任何的想法?

最佳答案

代替group1.on("click",d => console.log(d.value));group1.on("click",(e, d) => console.log(d.value));从 D3 V6 开始, event 作为第一个参数传递给鼠标事件回调

关于d3.js 在回调函数点击事件中未定义的数据值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/67314864/

相关文章:

javascript - d3js - 创建类似 Asterplot 的图表(包括示例)

c# - 你如何找出在 C# 中订阅了一个事件的内容?

javascript - Tablesorter 事件源不够具体。取消排序

使用 lock() 的 C# 事件监听器仍然抛出异常

c# - Moq - 设置模拟到第一次回调和第二次引发事件

javascript - 如何从 D3 v5 中的 CSV 文件加载数据

javascript - D3 异常堆积条形图

javascript - 在不使用 Promises 的情况下按顺序执行回调

javascript - 将 d3 力图的线放在前景中

javascript - 如何使函数等到使用 node.js 调用回调