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

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 变量，我收到编译错误"未解析的变量 d3.event.translate 和 d3.event.scale"。我想知道为什么是错误，或者我是否缺少一些东西。

Answer 1

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

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

因此，相应地编写缩放和平移函数将起作用。

Answer 2

不确定这是否是答案，但它可能与您正在使用的捆绑器有关。D3v4 文档中列出了一个关于捆绑器中d3.event的"陷阱"(是的，我知道您使用的是 v3.x.x，但它可能仍然适用)：

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