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

是否有可能去抖d3.zoom回调？

1 个答案: