rt 记录一下

           var zoom = d3.zoom()

               .scaleExtent([0.1,10])

               .on("zoom", zoomed);                                                                                                                                           

           function zoomed() {

               d3.select('#g_main').attr("transform", d3.event.transform);

           }

这里事件给了svg标签, g标签 定义id为g_main

这样就可以在svg标签内的任意位置来缩放g标签了.

d3.js 平移缩放的更多相关文章

  1. D3.js 使用缩放zoom时节点无法拖动，只能整体移动的问题

    .on("dragstart", function() { d3.event.sourceEvent.stopPropagation(); }) https://stackover ...

  2. 记录d3.js 力导向图的平移缩放，类似地图导航点击某一项移动到当前位置

    项目中有用到d3.js用于图结构的查询, 需求如下: 右上角有个模糊搜索功能,查询出来的结果用列表展示 点击列表的某一列,要求画布移动到当前选中的节点的位置,基于画布正中间 搜索出来的结果列表展示用的 ...

  3. 【 D3.js 进阶系列 — 6.1 】 缩放的应用（Zoom）

    缩放(Zoom)是另一种重要的可视化操作,主要是使用鼠标的滚轮进行. 1. zoom 的定义 缩放是由 d3.behavior.zoom() 定义的. var zoom = d3.behavior.z ...

  4. d3.js封装文本实现自动换行和旋转平移等功能

    我们下面话不多说,本文主要介绍的是利用D3.js封装文本实现自动换行功能的步骤,下面来一起看看吧. 一.引用 multext.js 文件 multext.js function appendMulti ...

  5. d3.js 地铁轨道交通项目实战

    上一章说了如何制作一个线路图,当然上一章是手写的JSON数据,当然手写的json数据有非常多的好处,例如可以应对客户的各种BT需求,但是大多数情况下我们都是使用地铁公司现成的JSON文件,话不多说我们 ...

  6. 【 D3.js 入门系列 --- 3 】 做一个简单的图表！

    前面说了几节,都是对文字进行处理,这一节中将用 D3.js 做一个简单的柱形图. 做柱形图有很多种方法,比如用 HTML 的 div 标签,或用 svg . 推荐用 SVG 来做各种图形.SVG 意为 ...

  7. D3.js 简介和安装

    一.What´s D3.js D3.js是一种数据操作类型的javascript库(也可视其为插件):结合HTML,SVG和CSS,D3可以图形化的,生动的展现数据. D3 的全称是(Data-Dri ...

  8. 【 D3.js 高级系列 — 7.0 】 标注地点

    有时需要告诉用户地图上的一些目标,如果该目标是只需要一个坐标就能表示的,称其为"标注". 1. 标注是什么 标注,是指地图上只需要一个坐标即可表示的元素.例如,在经纬度(116, ...

  9. 【 D3.js 高级系列 — 1.1 】 封装文本自动换行

    在[高级 - 第 1.0 章]中讲解了在 SVG 中如何配合使用 text 和 tspan 来实现换行的功能,本文对此功能进行一下封装,以后就可以直接用了. 1. 引用 js 文件 下载地址:mult ...

随机推荐

  1. mysql合并表

    有如下两张表 a +------+------+---------+ | uid | name | addtime | +------+------+---------+ | | | +------+ ...

  2. Elasticsearch-6.7.0系列（二）ES集群安装与验证

    准备3台centos7机器/虚拟机,每台都安装上elasticsearch6.7.0 ,安装过程参考我的另一篇博客<Elasticsearch-6.7.0系列(一)9200端口 .tar.gz版 ...

  3. 一些常用的js循环，如for

    https://blog.csdn.net/u014399368/article/details/82862444

  4. [android]adb 模拟双击 快速点击屏幕

    1,记录数据文件到recordtap dd if=/dev/input/event1 of=/sdcard/recordtap 2,点击需要点击的位置,产生点击数据,然后按 ctrl+c 结束 3,写 ...

  5. js任意数组按下标相加

    let a=[1,2,3], b=[4,5,6]; let s = a.map(function(v, i) { return v + b[i]; }); console.log(s);

  6. 将mnist获得的数据还原成图片形式

    MNIST是一个手写数字数据集,里面所包含的数据元素是类似于一个1×784矩阵和1×10矩阵的结构,那么,如何将这些数据元素转化为更加直观的图像呢?通过以下python代码,可以实现. from PI ...

  7. Linux 系统报错 rcu_preempt detected stalls on CPUs/tasks

    说在前面的一些废话: 这是什么错误我不知道,为什么出现我不知道! 那为什么还要把他写出来了,只是因为这个错误遇到了,而且浪费了我很多时间和精力. 故事留给自己看,解决办法就是,重新升级一下Linux系 ...

  8. Windows下安装Python虚拟环境

    Windows下安装Python虚拟环境 虚拟环境安装 需求概要 "虚拟环境"是从电脑独立开辟出来的环境.就好比我们生活中的橱柜中,会把酱油放在一个瓶子里,把醋放在另外一个瓶子里, ...

  9. mysql常规巡检

    mysql常规巡检   目录 一.巡检脚本 二.下载巡检脚本 三.脚本执行说明 1.inspection.conf 使用说明 2.inspection_mysql.sh 使用说明 3.mysqltun ...

  10. Oracle中 to_date和to_char用法

    to_date("要转换的字符串","转换的格式")   两个参数的格式必须匹配,否则会报错. 即按照第二个参数的格式解释第一个参数. to_char(日期,& ...