d3.js 平移缩放
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 平移缩放的更多相关文章
- D3.js 使用缩放zoom时节点无法拖动,只能整体移动的问题
.on("dragstart", function() { d3.event.sourceEvent.stopPropagation(); }) https://stackover ...
- 记录d3.js 力导向图的平移缩放,类似地图导航点击某一项移动到当前位置
项目中有用到d3.js用于图结构的查询, 需求如下: 右上角有个模糊搜索功能,查询出来的结果用列表展示 点击列表的某一列,要求画布移动到当前选中的节点的位置,基于画布正中间 搜索出来的结果列表展示用的 ...
- 【 D3.js 进阶系列 — 6.1 】 缩放的应用(Zoom)
缩放(Zoom)是另一种重要的可视化操作,主要是使用鼠标的滚轮进行. 1. zoom 的定义 缩放是由 d3.behavior.zoom() 定义的. var zoom = d3.behavior.z ...
- d3.js封装文本实现自动换行和旋转平移等功能
我们下面话不多说,本文主要介绍的是利用D3.js封装文本实现自动换行功能的步骤,下面来一起看看吧. 一.引用 multext.js 文件 multext.js function appendMulti ...
- d3.js 地铁轨道交通项目实战
上一章说了如何制作一个线路图,当然上一章是手写的JSON数据,当然手写的json数据有非常多的好处,例如可以应对客户的各种BT需求,但是大多数情况下我们都是使用地铁公司现成的JSON文件,话不多说我们 ...
- 【 D3.js 入门系列 --- 3 】 做一个简单的图表!
前面说了几节,都是对文字进行处理,这一节中将用 D3.js 做一个简单的柱形图. 做柱形图有很多种方法,比如用 HTML 的 div 标签,或用 svg . 推荐用 SVG 来做各种图形.SVG 意为 ...
- D3.js 简介和安装
一.What´s D3.js D3.js是一种数据操作类型的javascript库(也可视其为插件):结合HTML,SVG和CSS,D3可以图形化的,生动的展现数据. D3 的全称是(Data-Dri ...
- 【 D3.js 高级系列 — 7.0 】 标注地点
有时需要告诉用户地图上的一些目标,如果该目标是只需要一个坐标就能表示的,称其为"标注". 1. 标注是什么 标注,是指地图上只需要一个坐标即可表示的元素.例如,在经纬度(116, ...
- 【 D3.js 高级系列 — 1.1 】 封装文本自动换行
在[高级 - 第 1.0 章]中讲解了在 SVG 中如何配合使用 text 和 tspan 来实现换行的功能,本文对此功能进行一下封装,以后就可以直接用了. 1. 引用 js 文件 下载地址:mult ...
随机推荐
- MySQL面试题中:主从同步的原理
主从同步的原理:1.主库上面有一个IO线程,从库上有一个IO线程和一个SQL线程,从库中的IO线程负责从主库读取binlog,并写入从库的中继日志:SQL线程负责读取并执行中继日志中的binlog,转 ...
- 猜测的rpc负载均衡原理,基于dubbo的架构
集群层(Cluster):封装多个提供者的路由及负载均衡,并桥接注册中心,以Invoker为中心,扩展接口为Cluster.Directory.Router和LoadBalance.将多个服务提供方组 ...
- 京东饭粒捡漏V1.0.8
20180617 更新 V1.0.81.捡漏策略更新:自动检测商品,有货后自动下单:2.加车自动使用最优满减券组合: 功能介绍1.京东商城专用,支持饭粒模式下单,自己获得京豆返利 2.捡漏模式:帮助用 ...
- Windows FFMPEG开发环境配置
1.去FFMPEG网站上下载Dev版本的库,里面有我们需要的头文件和lib文件,然后下载Shared版本的库,里面有我们需要的dll文件 http://ffmpeg.zeranoe.com/build ...
- 总结:Java 集合进阶精讲2-ArrayList
知识点:Java 集合框架图 总结:Java 集合进阶精讲1 总结:Java 集合进阶精讲2-ArrayList 初探: ArrayList底层结构是数组,是List接口的 可变数组的实现,所以会占用 ...
- 采用自定义协议代替OCX组件
事情起源:公司视频播放一直是采用的嵌入浏览器组件实现视频的预览回放等功能.这种实现方式要求客户使用IE浏览器. 最近上线项目使用Html 5开发,要求IE11.项目中使用了视频播放功能,如果全部升级到 ...
- JavaScript数组方法--slice、sort、splice
数组常用方法应该只剩下最后这哥仨了,他们都是最早的ECMA-262标准的方法,结果写着写着,居然把他们写到最后了. slice:slice() 方法返回一个新的数组对象,这一对象是一个由 begin和 ...
- 基于KMP算法的字符串模式匹配问题
基于KMP算法的字符匹配问题 反正整个清明都在纠结这玩意...差点我以为下个清明要给自己过了. 至于大体的理解,我就不再多说了(还要画图多麻烦鸭),我参考了以下两个博客,写的真的不错,我放了超链接,点 ...
- 001.[python学习]写在前面的
0.多动手写写也许你所说的问题就不是问题: 1.最好的帮助文档是dir和help,如下图: 2.如果为了快速完成任务可以选择IDE,否则尽量不要依赖它,因为它的智能导致自己的无能: 3.也许有其他语言 ...
- rsync:基本命令和用法
以下是rsync系列篇: 1.rsync(一):基本命令和用法 2.rsync(二):inotify+rsync详细说明和sersync 3.rsync算法原理和工作流程分析 4.rsync技术报告( ...