D3.js 在d3js事件上执行React js函数

我是新来的。我需要在单击d3js组件时调用react js函数

我在react组件中有一个d3js条形图。在同一组件中，我有以下方法：

handleClick: function(data){
    this.props.onClick(data);
},

我需要在单击d3js时调用此函数：

var g = svg.selectAll(".arc")
    .data(pie(data))
    .enter().append("g")
    .on("mouseover", mouseover)
    .on("mouseout", mouseout)
    .on("click", function(d) {
    this.handleClick(); // my react method
   })

但这不起作用。我在chrome中的输出如下：

this.handleClick is not a function

---

怎么了？

当在匿名函数中引用时，这并不是指react组件。实际上，这是指由单击处理程序创建的上下文

这是一个常见的javascript误解。 在另一个函数中访问特定“this”变量的常用方法是将该函数绑定到特定的this对象

var g = svg.selectAll(".arc")
.data(pie(data))
.enter().append("g")
.on("mouseover", mouseover)
.on("mouseout", mouseout)
.on("click", function(d) {
    this.handleClick(); // my react method
}.bind(this) )

另一种方法是将“this”绑定到外部变量，然后在其他函数中使用该变量。通常，人们称这个变量为“self”或“that”

更多关于它的信息以及它是如何工作的，

---

当在匿名函数中引用时，这并不指react组件。实际上，这是指由单击处理程序创建的上下文

这是一个常见的javascript误解。 在另一个函数中访问特定“this”变量的常用方法是将该函数绑定到特定的this对象

var g = svg.selectAll(".arc")
.data(pie(data))
.enter().append("g")
.on("mouseover", mouseover)
.on("mouseout", mouseout)
.on("click", function(d) {
    this.handleClick(); // my react method
}.bind(this) )

另一种方法是将“this”绑定到外部变量，然后在其他函数中使用该变量。通常，人们称这个变量为“self”或“that”

更多关于它的信息以及它是如何工作的，

---

如果您使用的是ES6，只需使用箭头函数，箭头函数不会生成词汇包装器，在使用D3 with React时会导致此问题，因此只需执行以下操作：

const g = svg.selectAll(".arc")
  .data(pie(data))
  .enter().append("g")
  .on("mouseover", mouseover)
  .on("mouseout", mouseout)
  .on("click", d => {
     this.handleClick(); // my react method
})

---

如果您使用的是ES6，只需使用arrow函数，arrow函数不会生成词法包装器，在使用带有React的D3时会导致此问题，因此只需执行以下操作：

const g = svg.selectAll(".arc")
  .data(pie(data))
  .enter().append("g")
  .on("mouseover", mouseover)
  .on("mouseout", mouseout)
  .on("click", d => {
     this.handleClick(); // my react method
})