zoukankan      html  css  js  c++  java
  • 【 D3.js 进阶系列 — 6.1 】 缩放的应用(Zoom)

    缩放(Zoom)是另一种重要的可视化操作,主要是使用鼠标的滚轮进行。

    1. zoom 的定义

    缩放是由 d3.behavior.zoom() 定义的。

    		var zoom = d3.behavior.zoom()
    					.scaleExtent([1, 10])
    					.on("zoom", zoomed);
    
    		function zoomed() {
    			circles_group.attr("transform", 
    				"translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
    		}

    第 2 行:scaleExtent 用于设置最小和最大的缩放比例

    第 3 行:当 zoom 事件发生时,调用 zoomed 函数

    第 5 - 8 行:zoomed 函数,用于更改需要缩放的元素的属性,d3.event.translate 是平移的坐标值,d3.event.scale 是缩放的值。

    2. 绘制圆

    与【进阶 - 第 6.0 章】一样,绘制两个圆用于测试。只是将圆 circle 元素添加到一个组 g 里,g 元素调用 call(zoom),zoom 为刚才定义的缩放行为。

    		var circles_group = svg.append("g")
    								.call(zoom);
    		
    		circles_group.selectAll("circle")
    				.data(circles)
    				.enter()
    				.append("circle")
    				.attr("cx",function(d){ return d.cx; })
    				.attr("cy",function(d){ return d.cy; })
    				.attr("r",function(d){ return d.r; })
    				.attr("fill","black");

    3. 结果

    结果如下,在圆上滑动鼠标滚轮试试:

    源代码单击以下链接后查看:

    http://www.ourd3js.com/demo/J-6.1/zoom.html

    谢谢阅读。

    文档信息

  • 相关阅读:
    HTTP GET POST PUT DELETE 四种请求
    PHP表达式
    PHP基础
    文件存储
    动态加载布局文件
    Android新增控件
    Spring简介
    Hibenate配置篇
    无题
    struts常用标签与校验器
  • 原文地址:https://www.cnblogs.com/new0801/p/6176798.html
Copyright © 2011-2022 走看看