使用 d3 拖动和缩放图表

Question

我正在绘制图表并尝试使用 d3 使其缩放和拖动，如下所示。

export class LineGraphDirective {

  private host;
  private svg;
  private margin;
  private width;
  private height;
  private xScale; // D3 scale in X
  private yScale; // D3 scale in Y
  private zScale; // D3 color scale
  private xAxis;
  private yAxis;
  private htmlElement:HTMLElement;
  private parseDate;
  private ds;
  private zoom;

  constructor(private element:ElementRef) {
    this.htmlElement = this.element.nativeElement;
    this.host = d3.select(this.element.nativeElement);
    this.parseDate = d3.timeParse('%Y-%m-%d');

    let data = [];

    this.ngOnChanges(data);

  }

  ngOnChanges(data):void {
    this.setup(data);
    this.initData(data);
    this.buildSVG();
    this.scaleAxis(data);
    this.populate();
    this.drawXAxis();
    this.drawYAxis();
  }

  private setup(data):void {
    this.margin = {top: 50, right: 100, bottom: 100, left: 100};
    this.width = 600;
    this.height = 400;
    this.xScale = d3.scaleTime().range([0, this.width]);
    this.yScale = d3.scaleLinear().range([this.height, 0]);
    this.zScale = d3.scaleOrdinal(d3.schemeCategory10);

    this.zScale.domain(d3.keys(data[0]).filter(function (key) {
      return key !== "date";
    }));
  }

  private initData(data) {

  }

  /**
   *  build  SVG element using the configurations
   **/
  private buildSVG():void {
    this.host.html('');
    this.zoom = d3.zoom().scaleExtent([1, 2]).translateExtent([[0, -100], this.width + 90, this.height + 100]).on("zoom", this.zoomed());

    this.svg = this.host.append('svg')
      .attr('width', this.width + this.margin.left + this.margin.right)
      .attr('height', this.height + this.margin.top + this.margin.bottom)
      .append('g')
      .attr('transform', 'translate(' + this.margin.left + ',' + this.margin.top + ')')
      .call(this.zoom);

    this.svg.append('rect')
      .attr('class', 'view')
      .attr('x', 0.5)
      .attr('y', 0.5)
      .attr('width', this.width)
      .attr('height', this.height)
      .style('fill', '#EEEEEE')
      .style('stroke-width', '0px');
  }

  private scaleAxis(data) {
  }

  /**
   * Create x axis
   **/
  private drawXAxis():void {
    this.xAxis = d3.axisBottom()
      .scale(this.xScale)
      .tickPadding(15);

    this.svg.append('g')
      .attr('class', 'x-axis')
      .attr('transform', 'translate(0,' + this.height + ')')
      .call(this.xAxis);
  }

  /**
   *create y axis
   **/
  private drawYAxis():void {

    this.yAxis = d3.axisLeft()
      .scale(this.yScale)
      .tickPadding(10);

    this.svg.append('g')
      .attr('class', 'y-axis')
      .call(this.yAxis)
      .append('text')
      .attr('transform', 'rotate(-90)');
  }

  /**
   * Populate the graphs
   **/
  private populate():void {
  }

  private zoomed() {
    console.log('Zoomed');
  }
}

当应用程序运行时，它会创建图表并调用zoomed()函数，以便在控制台日志上打印缩放。 但是当尝试缩放或拖动时，它不会触发这些事件。

d3 版本是 4，我使用的是 Angular 2。

有什么建议？

谢谢

Answer 1

尝试改变

.on("zoom", this.zoomed())

到

.on("zoom", () => this.zoomed())