javascript - 用 d3 以 Angular 放大 svg

Question

我会平移/缩放 svg。

我正在尝试使用 this tutorial 中提到的 d3

这是我的代码:

import { Component,AfterViewInit,OnInit } from '@angular/core';
import * as d3 from "d3";
@Component({
  selector: 'my-app',
  templateUrl: './app.component.svg',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements AfterViewInit,OnInit  {
  name = 'Angular';
  ngOnInit() {

  }
  ngAfterViewInit() {
    var svg = d3.select("svg")
      .call(d3.zoom().on("zoom", function () {
       svg.attr("transform", d3.event.transform)
      }))
    .append("g")
  }
}

实际上什么都没有发生，在 svg 上滚动不会缩放

live demo

Answer 1

有合适的解决办法:

var svg = d3.select("svg");
var zoomFn = d3.zoom().on('zoom', function() {
    svg.attr("transform", d3.event.transform)
});    
svg.call(zoomFn);