“d”参数在 .on 事件中返回未定义

Question

d我遇到D3.js 中的参数返回的问题undefined。这是我现在的代码const buttons = d3.select("body")  .data(countries)  .enter()  .append("button")  .text((d) => { return d.location; })              // returns name location  .attr("value", (d) => { return d.location; })     // returns name location  .on("click", (d) => { console.log(d.location) }); // returns undefined在按钮上，我看到了正确的文本和位置值，因此它在那里正常工作，但在我的点击事件中，我想更改一个具有特定国家/地区名称的变量，但它返回未定义。

Answer 1

这是因为“点击”事件event首先给你参数，然后是datum：

当在选定元素上调度指定事件时，将为该元素评估指定的侦听器，传递当前事件（event）和当前数据（d），并将其作为当前 DOM 元素（event.currentTarget）。听众总是看到他们元素的最新数据。

我想你正在寻找这个：

const countries = [

  {

    location: 'USA',

  },

  {

    location: 'Canada',

  }

];

const buttons = d3.select("body")

  .selectAll('button')

  .data(countries)

  .enter()

  .append("button")

  .text((d) => { return d.location; })              // returns name location

  .attr("value", (d) => { return d.location; })     // returns name location

  .on("click", (e, d) => { console.log(d.location) }); // returns name location