d3.js——图形缩放平移操作

最新推荐文章于 2024-04-10 17:07:12 发布

AryaoO

最新推荐文章于 2024-04-10 17:07:12 发布

阅读量1.5w

点赞数

分类专栏：前端开发——D3 前端开发基础文章标签： behavior zoom scale transform scaleEvent

本文链接：https://blog.csdn.net/selina_chan/article/details/51361213

版权

本文通过一个实例展示了如何利用d3.js库进行图形的缩放和平移操作。首先创建一个SVG元素，并定义缩放行为，设置缩放范围。接着，将缩放行为应用到SVG的g元素上，并绘制多个圆形。最后，定义了一个`zoomed`函数，当发生缩放或平移事件时，更新图形的位置和大小。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>缩放操作</title>
</head>
<body>
<script src = "d3.js"></script>
<script>
    var width = 400,
            height = 400;
    var circles =[{cx:150,cy:200,r:30},
        {cx:250,cy:200,r:30}]
    var svg = d3.select("body").append("svg")
            .attr("width",width)
            .attr("height",height)


    //定义缩放函数
    var zoom = d3.behavior.zoom()
            .scaleExtent([1,10])//用于设置最小和最大的缩放比例
            .on("zoom",zoomed)

    //绘制
    var g = svg.append("g")
            .call(zoom)
    g.selectAll("circle")
            .data(circles)
            .enter()
            .append("circle")
            .attr("cx", function (d) {
                return d.cx
            })
            .a