Question

我正在尝试在d3中实现缩放功能。它以角度2实现，D3版本为3.5.17。

//This is where I initialize the tree layout 
ngOnInit() {
    this.tree = d3.layout.tree().size([this.height, this.width]);
    this.svg = d3.select("#body").append("div")
      .classed("svg-container", true)
      .append("svg")
      .attr("preserveAspectRatio", "xMinYMin meet")
      .attr("viewBox", "0 0 " + this.width + " " + this.height)
      .attr("width", 10 * (this.width + this.margin.right + this.margin.left))
      .attr("height", this.height + this.margin.top + this.margin.bottom)
      .call(d3.behavior.zoom().scaleExtent([-8, 8]).on("zoom", this.zoom))
      .classed("svg-content-responsive", true)
}

//following is the zoom function 
public zoom = () => {
    this.svg.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
  };

但是，我得到d3.event.translate和d3.event.scale变量的编译错误'unresolved variable d3.event.translate和d3.event.scale'。我想知道为什么是错误或我是否缺少。

Answer 1

不确定这是否是答案，但它可能与您正在使用的捆绑程序有关。 D3v4文档中列出了一个“问题”（是的，我知道你使用的是v3.x.x，但它可能仍然适用）关于捆绑包中的d3.event：

https://github.com/d3/d3-selection/blob/master/README.md#event

Answer 2

为了其他人的利益，访问此页面。在D3.js版本5中，d3.event.translate在逻辑上已更改为d3.event.transfrom。因此在新库中：

scale = d3.event.transform.k
Xtranslation = d3.event.transform.x
Ytranslation = d3.event.transform.y

因此可以相应地编写缩放和平移功能。

未解析的变量d3.event.translate和d3.event.scale

2 个答案: