how to know the current Zoom level in D3.js

后端 未结 3 1036
独厮守ぢ
独厮守ぢ 2021-01-04 07:40

I have a problem since a few days. I have a graph and when I use Zoom Behavior it works, but I need to know when I reach maximum zoom to load new given

// Sp         


        
相关标签:
3条回答
  • 2021-01-04 07:59

    As of D3 v4 there are two documented ways of retrieving the zoom state. To quote d3/d3-zoom README (under Zoom Transforms):

    To retrieve the zoom state, use event.transform on a current zoom event within a zoom event listener (see zoom.on), or use d3.zoomTransform for a given node.

    https://github.com/d3/d3-zoom/blob/master/README.md#zoom-transforms

    0 讨论(0)
  • 2021-01-04 08:07

    In the draw function the current event will have the zoom level (d3.event.scale as you mentioned). Also if you keep the behaviour around like:

    var zm = d3.behavior.zoom().x(x).scaleExtent([1,10]).on("zoom", draw);
    

    Then you can find the current zoom level by calling:

    zm.scale();
    
    0 讨论(0)
  • 2021-01-04 08:13
    rect.call(zm=d3.behavior.zoom().x(x).scaleExtent([1,10]).on("zoom", draw));
    

    After a new test i have the answer :

    var currentZoom = d3.event.scale;
    

    But only available/readable in the draw() function called by .on("zoom", draw)

    rect.call( zm = d3.behavior.zoom().x(x).scaleExtent([1,10]).on("zoom", draw));
    
    function draw() {
        // trace l'axe X
        svg.select("g.x.axis").call(xAxis);
        // trace l'axe Y
        svg.select("g.y.axis").call(yAxis);
        // trace la courbe
        svg.select("path.line").attr("d", line);
    
        console.log(zm.scale(), zm.translate()); // , zm.translate[1] = Y
        console.log(d3.event.scale, d3.event.translate[0]); // , d3.event.translate[1] = Y
    }
    
    0 讨论(0)
提交回复
热议问题