d3.zoom()缩放功能

echo-_-

已于 2023-08-21 09:32:44 修改

阅读量1k

点赞数

文章标签：开发语言 javascript

于 2023-08-20 17:39:01 首次发布

本文链接：https://blog.csdn.net/weixin_57182748/article/details/132394057

版权

D3.zoom（）缩放功能

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

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

原生事件	zoom事件
mousedown 鼠标点击开始	start
mousemove 鼠标移动	zoom
mouseup 鼠标放开	end
dblclick 双击鼠标	放大
wheel 鼠标滚轮	zoom
touchstart 触屏开始	放大
touchmove 触屏移动	zoom
touchend 触屏结束	end

常用的api方法

d3.zoom()

使用d3.zoom（），返回值是一个zoom方法，所以需要连带使用selection.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 中

<Script>
const zoom = d3.zoom().extent([[0, 0], [250, 250]])
</Script>

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

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

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

2.实际操作例子

<!DOCTYPE html>
<body>
    <div class="qq"></div>
</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);
    })

在这里插入图片描述

echo-_-

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
d3.zoom()缩放功能

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

扫一扫