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. Windows自定义运行命令

    1 打开注册表regedit 2 找到:HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\App Paths 3 新增项,自己运 ...

  2. [ZZ]AppiumForWindows 菜鸟计划合集

    AppiumForWindows 菜鸟计划 (一) Appium 材料包 AppiumForWindows 菜鸟计划 (二) 源码环境搭建及代码结构 AppiumForWindows 菜鸟计划 (三) ...

  3. LeetCode 简单等级

    1. 两数之和 给定一个整数数组 nums 和一个目标值 target,请你在该数组中找出和为目标值的那 两个 整数,并返回他们的数组下标. 你可以假设每种输入只会对应一个答案.但是,你不能重复利用这 ...

  4. 使用原生JDBC循环读取文件并持久化到数据库

    先上代码: package com.demo.common.service; import java.io.File; import java.io.FileInputStream; import j ...

  5. Filter简易实现.

    一 代码结构: 二 代码 Test.java: package com.demo.test; import com.demo.filter.ApplicationFilterChain; import ...

  6. Pandas中Loc用法总结

    摘自:http://pandas.pydata.org/pandas-docs/stable/generated/pandas.DataFrame.loc.html 具体用法,假设数据源为: > ...

  7. gentoo hibernate

    首先修改内核: Power management and ACPI options ---> [*] Suspend to RAM and standby [*] Hibernation (ak ...

  8. mongo 数据库

    一.管理mongo 配置文件在/etc/mongod.conf 默认端口27017 启动                    sudo service mongod start 停止         ...

  9. matlab-调用摄像头人脸识别

    ----------------------------边学边写边学习------------------------------------- 版本:2014a 调用摄像头 a = imaqhwin ...

  10. JVM运行、类加载的全过程

    类加载机制:JVM把CLASS文件加载到内存,并对数据进行校验.解析和初始化,最终形成JVM可以直接使用的Java文件. 加载:把class文件字节码加载到内存中,并且将这些静态数据转换成方法区中的运 ...