Question

d3的on函数可以绑定一些鼠标事件，例如.on('click',callbackfunction)，.on('mouseover',callbackfunction) .. etc。

例如：

this.state.svg
      .selectAll("rect")
      .data(this.state.data)
      .enter()
      .append("rect")
      .on('mouseover',(d,i)=>{
        d3.select(<any>this)
        .attr('fill','#0C9CDF');
      })

this可以直接操纵当前的dom（或svg）对象，但不能在Angle中正常工作：

core.js:1673 ERROR TypeError: this.setAttribute is not a function
    at AppComponent.<anonymous> (attr.js:17)
    at Selection.each (each.js:5)
    at Selection.attr (attr.js:53)
    at SVGRectElement.<anonymous> (app.component.ts:269)
    at SVGRectElement.<anonymous> (on.js:27)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
    at Object.onInvokeTask (core.js:3811)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:422)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:195)
    at ZoneTask.push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (zone.js:498)

在操作过程中，角度可能会使用this作为component's this，以及如何正确指定它。

D3 Mouse Events

Answer 1

我发现问题出在arrow functions expression中，它将使用组件this对象，您必须使用Simple function：

  .on('mouseover',function(d,i)=>{
        d3.select(<any>this)
        .attr('fill','#0C9CDF');
      })

Angular 6，d3 v5鼠标事件，错误TypeError：this.setAttribute不是函数

1 个答案: