d3.zoom()缩放功能

本文介绍: 当我们使用 D3 设定缩放功能时，它其实同时包含了平移跟缩放两种功能，我们能使用鼠标的滚轮或手指触控的方式在画面上进行相对应的操作。使用 d3.zoom（），返回值是一个 zoom 方法，所以需要连带使用select ion.call()方法，将其绑定到dom上。// 此外可以使用上面不同的api方法调整缩放效果。// 监听缩放事件 event是拿到的dom 元素。// 监听缩放事件 event是拿到的dom 元素。// 设置鼠标双击生效时间。// 设置 viewBox。// 取消滑轮缩放事件。//设置缩放最大比例。

D3.zoom（）缩放功能

针对于图表资料比较多的时候，可以进行放大或缩小查询，是比较使用的功能：

当我们使用 D3 设定缩放功能时，它其实同时包含了平移跟缩放两种功能，我们能使用鼠标的滚轮或手指触控的方式在画面上进行相对应的操作。由于 Zoom 会跟多种原生 DOM 事件相呼应，官方文件也列出每个原生的事件会进行哪种Zoom 的操作：

原生事件	zoom事件
mousedown 鼠标点击开始	start
mouse m ov e 鼠标移动	zoom
mouse up 鼠标放开	end
dblclick 双击鼠标	放大
wh e el 鼠标滚轮	zoom
touch start 触屏开始	放大
touch m ov e 触屏移动	zoom
touch end 触屏结束	end

常用的api方法

d3.zoom()

使用d3.zoom（），返回值是一个zoom方法，所以需要连带使用select ion.call()方法，将其绑定到dom上

zoom.transform( )、zoom.translateBy( )、zoom.translateTo( )
这几个方法主要是是用来调整 zoom 的位置。当我们使用 d3.zoom 建立一个 zoom 行为时，zoom 行为的相关状态会被储存到 DOM 元素上，而这个相关的状态可以透过两种方式改变。
1.用户的交互
2.zoom.transform  移动方法

之后通过 .translateBy( )方法，可以调整 transform 的 x, y 值；透过 .tramslateTo( ) 则可以将 tramsform 置于正中间

zoom.extent([x0, y0], [x1, y1])

这个API 是用来设定viewport的范围，[x0, y0] 代表svg 左上方的起点位置，[x1, y1] 则代表终点的座标，借由这个方法就能把缩放的画布限缩在某个范围的viewport 中

&lt;Script&gt;
const zoom = d3.zoom().extent([[0, 0], [250, 250]])
</Script&gt;

zoom.scaleExtent([k0, k1])
设定缩放系数的大小范围，k0 代表缩放的最小值，k1则是缩放的最大值，缩放的比例则会被限制在最小值跟最大值中间，预设是 [0, ∞]。如果两个值都设定为1的话，就代表不能放大或缩小

zoom.duration( )
这个 API 是用来设定鼠标双击/触控双击时，zoom缩放的变换时长，如果没有特别设定的话预设是250毫秒。

zoom.on( )
主要是用来监听缩放事件的方法。如果想要取消某些原生事件，让它不要与缩放事件呼应，也可以用 zoom.on( ) 把事件设定为null，
<script&gt;
  selection.call(zoom).on("wheel.zoom", null);  // 取消滑轮缩放事件
</script&gt;s

2.实际操作例子

<!DOCTYPE html&gt;
<body&gt;
    <div class="qq"&gt;</div&gt;
</body>

</html>
<script>
    const svg = d3.select(".qq").append("svg").attr("width", 700).attr("height", 400).style("border", "1px solid pink")

    const circle = svg.append("circle")
        .attr("id", 'test1')
        .attr("cx", 350)
        .attr("cy", 200)
        .attr("r", 20)
        .attr("fill", "pink")

    // 建立缩放事件
    const zoom = d3.zoom()
        .on('zoom', function (event) {   // 监听缩放事件 event是拿到的dom元素
            console.log(event);
            circle.attr('transform', event.transform);
        });
    // 调用
    svg.call(zoom);
  
  // 此外可以使用上面不同的api方法调整缩放效果
  const zoom = d3.zoom()
        .extent([[0, 0], [100, 100]])// 设置viewBox
        .scaleExtent([0, 5]) //设置缩放最大比例
        .duration(200) // 设置鼠标双击生效时间
        .on('zoom', function (event) {   // 监听缩放事件 event是拿到的dom元素
            circle.attr('transform', event.transform);
        })


    svg.call(zoom).on("wheel.zoom", null); // 取消滚轮缩放
</script>

在这里插入图片描述

可自由编辑缩放例子,添加 input 输入框和重置按钮


	d3.zoomIdentity.scale(1)  将缩放后的重置为原始大小

<body>
    <div class="qq"></div>
    <input type="number" name="" id="">
    <button class="btn1">缩放</button>
    <button class="btn2">重置</button>
</body>

</html>
<script>
    const svg = d3.select(".qq").append("svg").attr("width", 700).attr("height", 400).style("border", "1px solid pink")

    const circle = svg.append("circle")
        .attr("id", 'test1')
        .attr("cx", 350)
        .attr("cy", 200)
        .attr("r", 20)
        .attr("fill", "pink")

    // 建立缩放事件
    const zoom = d3.zoom()
        .scaleExtent([0, 5]) //设置缩放最大比例
        .duration(200) // 设置鼠标双击生效时间
        .on('zoom', function (event) {   // 监听缩放事件 event是拿到的dom元素
            circle.attr('transform', event.transform);
        })


    // 调用
    svg.call(zoom)

    const btn1 = document.querySelector(".btn1").addEventListener("click", function () {
        const inputChange = Number(document.querySelector("input").value);
        console.log(typeof (inputChange));
        const transform = d3.zoomIdentity.scale(inputChange);
        svg.call(zoom.transform, transform);
    })
    // 重置
    const btn2 = document.querySelector(".btn2").addEventListener("click", function () {
        const transform = d3.zoomIdentity.scale(1)
        svg.call(zoom.transform, transform);
    })