D3的一个平移缩放例子，说明基本用法

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

sdxushuxun

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

阅读量7.2k

点赞数

分类专栏： D3js

D3js 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

通过这个例子理解d3的基本用法和属性用法：

<!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) {  //此处的即为circles数字的元素遍历
                return d.cx  
            })  
            .attr("cy", function (d) {  
                return d.cy  
            })  
            .attr("r", function (d) {  
                return d.r  
            })  
            .attr("fill","black")  
    function zoomed(){  
        g.attr("transform","translate("+d3.event.translate+")scale("+d3.event.scale+")")  
    } //d3.event.translate 是平移的坐标值，d3.event.scale 是缩放的值。  
</script>  
</body>  
</html>

转载：http://blog.csdn.net/selina_chan/article/details/51361213

sdxushuxun

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
2
评论
D3的一个平移缩放例子，说明基本用法

通过这个例子理解d3的基本用法和属性用法：缩放操作 var width = 400, height = 400; var circles =[{cx:150,cy:200,r:30}, {cx:250,cy:200,r:30}] var svg
复制链接

扫一扫