Is it possible to debounce d3.zoom callback? - d3.js

Question

I tried to create a zoom event with a function that redraws my svg. It was not running smoothly, and I would like to debounce it using the underscore library. i have imported underscore, but now if I call the redraw function, nothing happens.
This works:
let zoom = d3.zoom()
.scaleExtent(scaleExtent)
.on("zoom", redraw);
function redraw(){
console.log('test') //test
}
This doesn't:
let zoom = d3.zoom()
.scaleExtent(scaleExtent)
.on("zoom", _.debounce(redraw,200));
function redraw(){
console.log('test') // --no output--
}
Any thoughts on what i am doing wrong?

Answer 1

Since you have not posted the full code but here is how you can use underscore debounce and zoom.
I have put in comments in the code.
//save instance of transform
var transform;
var svg = d3.select("body")
.append("svg")
.attr("width", "100%")
.attr("height", "100%")
.call(d3.zoom().on("zoom", function() {
//save instance of transform, because when debouce is called
//d3.event will be null
transform = d3.event.transform;
//call the debounse function
lazyzoom();
}))
.append("g")
svg.append("circle")
.attr("cx", 100)
.attr("cy", 100)
.attr("r", 50)
.style("fill", "red")
var lazyzoom = _.debounce(function() {
svg.attr("transform", transform)
}, 300);
body,
html {
width: 100%;
height: 100%;
margin: 0;
}
svg {
position: absolute;
top: 0;
left: 0;
}
p {
text-align: center;
}
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore.js"></script>