Question

我想使用svg使用带有角度的图表制作应用程序，并且我还发现d3.js可能对它有很大帮助。但是首先我减少了代码，因为简单的d3.select（..）。on（click）不能很好地工作。我对打字稿也很陌生。

以下是html：

<button id="button1" class="btn btn-success" (click)="onButton1()">
Button 1</button>
<button id="button2" class="btn btn-danger">Button 2</button>
<br>
<svg width="1000" height="500" style="background-color: aqua"></svg>

和.ts：

import { Component, OnInit } from '@angular/core';
import * as d3 from "d3";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{

  user_id:number = 1;

  ngOnInit(){

    d3.select("#button2")
      .on("click", this.onButton2);

  }

  onButton1(){
    console.log("button 1 was clicked, user_id: " + this.user_id);
  }

  onButton2(){
    console.log("button 2 was clicked, user_id: " + this.user_id);
  }

}

在控制台上： Angular在开发模式下运行。调用enableProdMode（）以启用生产模式。

app.component.ts：22按钮1被单击，user_id：1

app.component.ts：26按钮2被单击，user_id：未定义

从d3.select ...绑定方法无法访问所提交的类，这可能是什么问题？

Answer 1

我不确定为什么要动态添加事件。这就是它失去其this参考的问题。

this对于d3和Angular都是不同的

我建议不要使用动态事件绑定，最好使用click事件并传递$event

checkout this post hope it helps

Angular和d3.js无法访问类字段

1 个答案: