是否有可能消除d3.zoom回調？

Question

我試圖用重繪我的svg的函數創建縮放事件。它運行不順暢，我想用下劃線庫去除它。我已經導入了下劃線，但是現在如果我調用重繪函數，則什麼也不會發生。

這工作：

let zoom = d3.zoom() 
    .scaleExtent(scaleExtent) 
    .on("zoom", redraw); 
function redraw(){ 
    console.log('test') //test 
} 

這不：

let zoom = d3.zoom() 
    .scaleExtent(scaleExtent) 
    .on("zoom", _.debounce(redraw,200)); 

function redraw(){ 
    console.log('test') // --no output-- 
} 

任何思考什麼我做錯了嗎？

Answer 1

既然您還沒有發佈完整的代碼，但這裏是您如何使用下劃線debounce和縮放。

我已在代碼中添加註釋。

//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() { 
 
    \t //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>