用 d3 以角度放大 svg答案

【问题标题】：zooming on svg with d3 in angular用 d3 以角度放大 svg
【发布时间】：2019-12-11 03:01:41
【问题描述】：

我会平移/缩放 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

【问题讨论】：

真的需要d3.js吗？缩放和平移可以在没有d3.js 的情况下使用正常的css 和Angular 鼠标事件完成。
不需要使用d3，你能告诉我更多细节吗？
您是在使用<svg> 标签还是作为<img> 的来源？
演示中的svg标签

标签： javascript angular d3.js svg

【解决方案1】：

举例说明svg 作为<img> 标签的来源

在你的app module中导入hammerjs

<!-- app.module.ts -->
import 'hammerjs'

以下是 img HTML 的代码。

<img [src]="imageSrc" alt="de-ethynizer" (pan)="onPan($event)" [ngStyle]="imageStyle()"
    (wheel)="onScroll($event)" style="cursor: grab">

以下是组件文件

export class SomeComponent implements OnInit{
 scale: number;
  pan: any = { x: 0, y: 0 };

  constructor() {
    this.scale = 1;
  }

  ngOnInit() {}

/* Method which adds style to the image */
  imageStyle() {
    return {
      transform: `translate(${this.pan['x']}px,${
        this.pan['y']
      }px) rotate(0deg) scale(${this.scale})`
    };
  }

  /* Method will be called on pan image */
  onPan(e) {
    this.pan = { x: e['deltaX'], y: e['deltaY'] };
  }

  /* Method will be called when user zooms image */
  onZoomP() {
    this.scale = this.scale + 0.1;
  }

  /* Method will be called when user zooms out image */
  onZoomM() {
// below you can check zoom out level from 0 to 1

    if (this.scale < 1) {
      return;
    } else {
      this.scale = this.scale - 0.1;
    }
  }

  /* Method will be called on mouse wheel scroll */
  onScroll(e) {
    if (e['deltaY'] < 0) {
      this.onZoomP();
    }
    if (e['deltaY'] > 0) {
      this.onZoomM();
    }
  }
}

【讨论】：

以<img> 为例。您也可以在<svg> 上使用相同的鼠标事件和css 和[ngStyle]。否则您可以将SVG 传递为<img> src 并可以使用整个解决方案
我正在尝试实现这一点，但它似乎只有在图像与容器大小相同时才有效，否则你不能平移超过容器的大小。有什么建议吗？
Nvm，通过存储原始平移和单独编辑来设法做到这一点。

【解决方案2】：

有适当的解决方案：

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

【讨论】：

为了能够放大，我应该添加另一个代码吗？因为我正在尝试向下缩放以进行缩放，但什么也没发生
@infodev，是的。添加我的代码和缩放将按预期工作
@IhorYanovchyk 既然d3.event 已被删除，我们该如何重写？

【解决方案3】：

就我而言，Ihor Yanovchyk 的解决方案缺少一些东西。 svg 以一种奇怪的方式放大，将整个 svg 移出视图。我不得不添加一个 selectAll('g') 并改为更改 ri 转换属性。

什么对我的情况有用：

const svg1 = select(this.svg1.nativeElement).call(zoom().on('zoom',function(){
    svg1.selectAll('g').attr("transform", event.transform)
}));

【讨论】：

d3.event 已被删除，我们如何重写？