I am trying to include zooming and panning functionality in d3. which works in javascript but giving error in typescript. d3.event.translate and d3.event.scale are not working in angular2 typescript
this.svg = this.host.append('svg')
.attr('width', this.width)
.attr('height', this.height)
.style({ 'float': 'right' })
.attr("pointer-events", "all")
.call(d3.behavior.zoom().on("zoom", redraw))
.append('svg:g');
function redraw() {
this.svg.attr("transform",
"translate(" + d3.event.translate + ")"
+ " scale(" + d3.event.scale + ")");
}
show this error on console.
Property 'translate' does not exist on type 'Event | BaseEvent'. Property 'scale' does not exist on type 'Event | BaseEvent'.
@mkaran's answer works, but rather defeats the purpose of typescript. The proper cast here is:
function redraw() {
let e = (<d3.ZoomEvent> d3.event);
this.svg.attr("transform",
"translate(" + e.translate + ")"
+ " scale(" + e.scale + ")");
}
Since the purpose the TypeScript is types, resorting to any is considered bad practice*.
You should also attempt to avoid in-line functions, and rather use proper methods of your class. But that's a question for another day...
*sometimes it's just easier :)
You have a problem with your scope of this
.call(d3.behavior.zoom().on("zoom", redraw))
.append('svg:g');
function redraw() {
this.svg.attr("transform",
"translate(" + d3.event.translate + ")"
+ " scale(" + d3.event.scale + ")");
}
should be something like:
.call(d3.behavior.zoom().on("zoom", redraw.bind(this))) //<-- bind the outer this here
.append('svg:g');
function redraw() {
this.svg.attr("transform",
"translate(" + d3.event.translate + ")"
+ " scale(" + d3.event.scale + ")");
}
or with the es6 arrow syntax:
.call(d3.behavior.zoom().on("zoom", ()=> redraw() ) ) //<-- arrow syntax
.append('svg:g');
function redraw() {
this.svg.attr("transform",
"translate(" + d3.event.translate + ")"
+ " scale(" + d3.event.scale + ")");
}