首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在d3中获取缩放和平移svg的边界

在d3中获取缩放和平移svg的边界,可以通过以下步骤实现:

  1. 创建一个SVG容器: 首先,需要创建一个SVG容器,可以使用d3.select()方法选择一个DOM元素,然后使用append()方法添加一个SVG元素,设置宽度和高度。
  2. 示例代码:
  3. 示例代码:
  4. 添加一个可缩放和平移的容器: 在SVG容器中,添加一个可缩放和平移的容器,可以使用d3.zoom()方法创建一个缩放和平移行为,并将其应用于SVG容器。
  5. 示例代码:
  6. 示例代码:
  7. 编写缩放事件的回调函数: 在缩放事件的回调函数中,可以获取当前的缩放比例和平移的偏移量,并根据这些值来计算边界。
  8. 示例代码:
  9. 示例代码:
  10. 在回调函数中,首先将缩放和平移应用于容器,然后使用getBBox()方法获取容器的边界框。根据当前的缩放比例和平移偏移量,计算出缩放后的边界。
  11. 完整示例代码:
  12. 完整示例代码:
  13. 这样,你就可以在d3中获取缩放和平移svg的边界了。注意,以上示例中的代码仅用于演示目的,实际使用时可能需要根据具体情况进行适当调整。
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

D3.js-基础知识

数据可视化已变得越来越被重视,市面上也出现了越来越多图标库,Highcharts。图标库很容易可以上手,然而在当前注重用户交互时代,其不易交互性突显越来越明显。...D3优势: 数据能够与DOM绑定在一起; 数据转化绘制是对立; 代码简洁; 大量布局; 基于SVG(矢量图形),缩放不会损失精度。...三、SVG SVG,指可缩放矢量图形(Scalable Vector Graphics),是用于描述二维矢量图形一种图形格式。D3SVG绘制图形!!!...SVG使用XML格式来定义图形,可将SVG直接嵌入HTML显示,也可以直接将文件名改为xxx.svg来使用。 SVG预定义了七种形状元素,分别为:矩形、圆形、椭圆、线段、折线、多边形、路径。...参数 说明 x 文字位置x坐标 y 文字位置y坐标 dx 相对于当前位置在x方向上平移距离(正则往右,负则往左) dy 相对于当前位置在y方向上平移距离(正则往下,负则往上) textLength

1.2K20

D3.js-基础知识

数据可视化已变得越来越被重视,市面上也出现了越来越多图标库,Highcharts。图标库很容易可以上手,然而在当前注重用户交互时代,其不易交互性突显越来越明显。...D3优势: 数据能够与DOM绑定在一起; 数据转化绘制是对立; 代码简洁; 大量布局; 基于SVG(矢量图形),缩放不会损失精度。...三、SVG SVG,指可缩放矢量图形(Scalable Vector Graphics),是用于描述二维矢量图形一种图形格式。D3SVG绘制图形!!!...6、 文字 在SVG可以使用标签绘制文字。...参数 说明 x 文字位置x坐标 y 文字位置y坐标 dx 相对于当前位置在x方向上平移距离(正则往右,负则往左) dy 相对于当前位置在y方向上平移距离(正则往下,负则往上) textLength

2K51

D3使用教程】(4) 添加数轴

(1)设置数轴 D3数轴实际商是由程序员自己来定义参数函数。调用数轴函数,会生成数轴相关可见元素,包括轴线、标签刻度 。...,将其线条标签插入到SVG,必须调用xAxis函数。...)+")") .call(xAxis); //translate(x,y)这是一个平移变换,上述代码只是平移了y轴,x轴不变。...但是,你也看到数轴会随着输入值域变化而相应地缩放,刻度标签也会相应地变化。 另外,我们也可以会刻度上标签定义样式。...,数值为0.23返回是23% 但是,使用tickFormat()之前,首先要定义一个新数值格式函数。通过这个函数可以告诉D3把数值当成百分比,同时保留一位小数等等。

22510

何在onCreate获取View高度宽度

何在onCreate获取View高度宽度 在开发过程中经常需要获取到View宽和高,可以通过View.getWidth()View.getHeight()来得到宽高。...然而新手们经常在onCreate方法中直接调用上面两个方法得到值是0! 这是为什么呢? 因为View绘制是通过两个遍历来完成,一个measure过程,一个layout过程。...只有经过“测量”“布局”之后,View才能正确地完成绘制。而这一切是发生在onCreate方法之后。...所以在onCreate中直接使用View.getWidth()View.getHeight()是无法得到正确。 那应该怎么onCreate获取View宽高呢?...开发者可以通过View.post()方法来获取到View宽高,该方法传递一个Runnable参数,然后将其添加到消息队列,最后在UI线程执行。

5.3K20

开启D3:是什么让程序员与设计师如此钟爱

从技术上来讲,能被浏览器访问并被其渲染东西都可以称为Web文档,这包括任何HTML页面,但更为重要还有SVG(可缩放矢量图形)及图片。 你以前可能用过SVG。...SVG是一种矢量图形格式:图形分辨率能够根据缩放级别自我调节,所以从来不会失真。其背后秘密就是使用了一种类似HTML标记语言来编码这种Web图形文档。...这也意味着你可以将单个数据点SVG图形元素(圆形、矩形及路径等)进行连接,然后基于这些数据连接点来格式化或重定位图形元素。 为了确保说明要点,我打算再重复一遍。...你肯定无数次从网上下载过SVG文件并粘贴到你设计软件。有了D3,你将来到SVG标签内容深处,即使是第一次接触,也会发现其组成逻辑命名方式似曾相识。...程序员为什么钟爱D3 如果你是一个程序员,你会钟爱D3,因为D3基于现有Web标准HTMLSVG就能发挥强大威力,根本不需要依赖任何第三方插件或专属框架。

1.7K20

JavaScript图表数据可视化:比较D3Kendo UI

D3Kendo UI只是在web应用程序创建图表两种方式,选项范围从简单地在屏幕上绘制图形到使用复杂图表组件。D3Kendo UI都很受欢迎,两者都能完成工作。...X轴是根据数据集中数量进行缩放。在下一节,我们将在显示区域略微移动图表。 现在我们开始讲D3部分内容。在这里,我们告诉D3我们将使用哪些数据,并指定图表每个条形图基本元素。...我们告诉它每个条宽度,我们告诉它条高度(获取数据值并缩放它)。我们告诉它应该将每个bar放在哪里,使用前面指定刻度指定XY值。最后,我让它用“钢蓝色”给每一根条涂上颜色,因为我喜欢蓝色。...这是D3基本概念一部分。使用图表可以做三件事:进入、更新和退出。输入获取数据并将其添加到现有的图表—它向图表添加新条形图。更新更改现有条值。退出从图表删除元素(条)。...我们只告诉D3我们想把它放在平移位置,然后告诉它添加坐标轴并给它数据。 在Kendo UI方面,我们已经有了Y轴X轴线,我们只需要标签。

11.8K30

D3.js库-1-入门篇

D3使你有能力借助HTML,SVGCSS来生动地可视化各种数据** D3不需要你使用某个特定框架,它重点在于对现代主流浏览器兼容,同时结合了强大可视化组件,以数据驱动方式去操作DOM 通过上述表达...解压后,在HTML文件包含相关js文件即可 [D3.js]https://github.com/d3/d3/releases/download/v5.16.0/d3.zip 通过采用...DOM:文档对象模型,用于修改文档内容结果 SVG:可缩放矢量图形,用于绘制可视化图形 以上知识点没有必要掌握非常精通,建议到W3school快速入门,了解基本概念,再看几个案例demo,以后遇到不懂地方可以进行查看...HTML 到 CSS,乃至进阶 XML、SQL、JS、PHP 等 HTML+CSS快速入门 初识HTML(5)+CSS(3)-2020升级版 SVG缩放矢量图形,即SVG,是W3C...XML分支语言之一,用于标记可缩放矢量图形 SVG-菜鸟课程 SVG|MDN SVG图像入门教程|阮一峰老师 D3.js 第一个推荐网站肯定是D3官网,包含很多示例API文档,都是根据最新版本发布

19.1K30

D3库实践笔记之图表交互 |可视化系列36

需要说明是在v3.x版本是使用d3.behavior.zoom()创建缩放行为,而v5.x及之后版本是d3.zoom(),不再有behavior这一层抽象; 给矩形坐标轴添加缩放交互响应: var...漫游是一种拖拽效果,但在力导向图等交互,我们希望有更纯粹拖拽元素效果,因此d3也有d3.drag()用于创建拖拽行为。...zoom一样,在v5.x版本是使用d3.drag()而v3.x版本是使用d3.behavior.drag()。drag没有缩放功能。...库,自然可以原生HTML元素进行交互,例如响应按钮点击事件,在html配置了按钮点击监测, 更新 </button...基础可视化实现挺简单,而深度交互内容很多,更优雅过渡渐变效果、更深入适应触摸设备交互、迷你图加入悬停框等等,在之后具体实践深入学习。

5.3K00

九大数据可视化利器,你有在使用吗?

D3 当下谈论数据可视化时,我们是绕不开 D3 ,这是由 Mike Bostock 创建库,它已成为在浏览器处理 SVG 矢量图形主要工具。...使用 SVG 时,无论放大多少倍,图像看起来都不会出现明显像素点。D3 允许创建各种高级图形,网状图、树状图、地图或气泡图,以及常用图形(条形图或散布图)。...D3 是如此受欢迎,以至于有许多其它库在 D3 基础上被创造出来,为人们提供更多“开箱即用”解决方案, NVD3。...RAPHAEL Raphael 是一个着重于与不同浏览器兼容库。它也使用 SVG 元素,这些元素是可以任意缩放,不存在像素点问题。它具有创建动画插入各种组件功能。...它允许您处理密集、紧凑和高容量数据,并会自动调整缩放比例时间戳。它还提供互动性(包括移动设备),即在无需额外设置情况下就可以拖动、缩放图形。Dygraphs 是一个非常快速高度可定制库。 ?

3.8K60

D3使用教程】(5) 动态更新与过渡动画

数据总是在变化,那么我们要如何将变化数据反映到图表上呢? 在D3,这些变化通过更新进行处理。而过渡通过使用动画用于处理视觉上展示。...通过事件监听实现交互 首先在body添加一个p标签,用于点击事件更新图表: Click on thie text to update the chart 接着在D3代码最后,添加D3事件监听...除此之外,我们还可以设置过渡类型,D3使用ease()指定不同过渡类型,默认效果"cublic-in-out",另外还有"linear"线性类型。...xy值较低圆形会超出图表区域边界,与轴线重叠在一起。...在SVG,支持剪切路径(clipping:path),就是PS蒙版。剪切路径是一个SVG元素,可以包含可见元素,并与这个可见元素一起构成可以应用到其他元素剪切路径或蒙版。

29410

使用D3.JS进行坐标轴绘制图绘制

前面已经说过D3功能十分强大,但是往往实际使用时只需要用到一部分内容,在这里,就只用到了 比例尺 布局 两部分,外加 核心 请求部分(请求数据),分别用来绘制Graph显示坐标轴顶点及边...) .tickFormat(formatPrecision); // 创建X轴, svg: g元素是一个分组元素 svg.append('g') .attr('class', 'axis...(yAxis); 绘制图(circle+line) 关于图绘制,本质上就是圆点线绘制,所以这也解释了为什么输入文件边数据也需要包含坐标的原因,因为在d3绘制顶点绘制边是互不相关。...另外需要注意是,这里不要直接返回源数据坐标,要带入到上述定义 比例尺 。....attr('y', 30) .attr('class', 'title') .text('这是一个用d3简略坐标轴'); // 画点,即绘制图顶点 svg.selectAll

6.4K30

前端er必须掌握数据可视化技术

一、基础开发技术 1、SVG SVG是一种XML语言,类似XHTML,可以用来绘制矢量图形。SVG可以通过定义必要线形状来创建一个图形,也可以修改已有的位图,或者将这两种方式结合起来创建图形。...一般如果画布比较大,有缩放平移等高频交互场景,常见饼图、柱状图、流程图之类开发,可以考虑使用 SVG 。...Canvas绘制图形不会出现在DOM结构,一般小画布、大数据量场景适合用Canvas,性能更好。...标签浏览器,不需要安装任何插件,便可以使用基于 OpenGL ES 2.0 API 在 canvas 中进行2D3D渲染。...D3有丰富数学函数处理数据转换物理计算,可以把数据 HTML 结构或者 SVG 文档对应起来,这种特性让我们可以更方便操作DOM绘制图表。

2.2K30

【数据可视化】数据可视化入门前了解

D3是目前最受欢迎可视化JS库之一,允许绑定任意数据到DOM,并将数据驱动转换应用到Document,使用它也可以用一个数组创建基本HTML表格,或利用它流体过渡交互,将相似的数据创建为惊人...D3支持标准Web技术(HTML、SVGCSS),并且有着海量用户贡献内容弥补它缺乏自定义内容缺陷。 因此,D3更适合在互联网上互动地展示数据。右图是使用D3技术所绘图形。...在现代浏览器,使用SVG技术进行图形绘制;在低版本IE浏览器,则使用VML进行图形绘制。 (2)非商业使用免费:Highcharts可以在个人网站、学校网站非营利机构中使用。...千万数据前端展现 通过增量渲染技术(4.0+),配合各种细致优化,ECharts能够展现千万级数据量,并且在这个数据量级依然能够进行流畅缩放平移等交互。...ECharts千万级数据前端展现效果图: 移动端优化 ECharts针对移动端交互做了细致优化,:移动端小屏上可以用手指在坐标系中进行缩放平移;PC端上可以用鼠标在图中进行缩放平移等。

18010

视觉进阶 | NumpyOpenCV图像几何变换

在本文中,我将向你介绍一些变换,以及如何在NumpyOpenCV执行这些变换。特别是,我将关注二维仿射变换。你需要是一些基本线性代数知识。...这包括旋转、平移缩放矩阵,如下图所示。 上述仿射变换一个非常有用性质是它们是线性函数。它们保留了乘法和加法运算,并遵循叠加原理。...左手坐标系旋转是通过交换符号来实现。 由于点围绕原点旋转,我们首先将中心平移到原点,然后再进行旋转缩放 然后将点变换回图像平面。 将变换点舍入为整数以表示离散像素值。...接下来,我们只考虑位于图像边界像素。 映射对应I(x,y)I’(x,y)。 如你所见,由于步骤4原因,生成图像将有几个锯齿孔。为了消除这种情况,开源库使用插值技术来消除变换后差异。...许多先进计算机视觉,使用视觉里程计多视图合成slam,都依赖于最初理解变换。我希望你能更好地理解这些公式是如何在编写使用

2.2K20

D3可视化:让您仪表板更上一层楼

D3基于JavaScript构建而成并利用了HTML、CSSSVG资源,因此您可以将任何可视化文件无缝集成至网页、仪表板或网站上。...您可以轻松处理大型数据集并使用少量资源分配创建流体动画视觉样式并使用诸如SVG与CSS外部堆栈工具永久修改视觉表现。...升级可视化使其动态化 D3图表可视化工具通过利用SVG甚至是Canvas流体动力学使得静态图表栩栩生。其中一个备受好评D3使用案例是纽约时报在关于Facebook IPO文章中使用一张图表。...纽约时报例子使用Canvas而非SVG,这有利于栅格化矢量。但使用SVG可根据其可缩放图形及无损调整大小能力提供相同动态动画与可定制性。...一种流行使用策略是采用D3地图可视化并创建可根据位置提供特定见解交互式图表。使用D3地图有包括悬停显示信息、缩放至特定区域及通过操作参数更改颜色特性。

5K10

射影几何变换基本原理

在上一篇文章我完成了整个流出前半部分:让用户从电脑中选择图片,自动制作成UE4贴花,并贴到地面上。本文讨论如何在非地面的平面/曲面上动态贴贴花。...缩放:线性增长相对速率 解决了平移旋转,缩放就简单多了,虽然缩放是3个维度考量,但由于贴花本身是一张图片,投影深度(即主视轴)可以写死一个固定值(比如400),还剩剩下长宽2个维度,又因为大多情况下需要锁定纵横比...除此之外,缩放需要有边界以免失控,比如上限设为1000%,下限设为5%。 ? 蓝图入口 蓝图入口是所有代码索引,本文展示所有蓝图/C++分支入口,代码明细存储在额外仓库,就不展示了。 ?...贴花优先级:在同一切面上不同贴花之间展示优先级应该遵守“后来者居上”原则。 实时状态:使用Widget制作UI界面展示当前状态(旋转角缩放比)以及鼠标/键盘操作提示。...射线长度上限:设定射线追踪长度上限(10000)以避免无穷远点足够远点,节省资源。

1.8K40

五个创建交互式图表Python库

你可以在matplotlib绘制一张图表,运用PhythonJavaScript插件增加交互功能,然后用D3渲染。...Mpld3包含缩放平移增加提示工具条(当鼠标悬浮于某一数据点上,出现提示信息)等内置插件。然而,Mpld3真正亮点在于它齐全API,允许让你创造自定义插件。...如果你熟悉D3JavaScript,就可以创造无穷尽各种图形。 当你准备发布图形时候,在最后添加一行额外代码,把你图形转换成HTMLJavaScript字符,就可以嵌入到任何网页。...Bokeh在允许用户在浏览器操作数据方面做得尤为突出,用户可以通过滑动下拉菜单进行筛选。与mpld3一样,你可以在其中缩放平移操作图表,但是也可以关注通过框或套索选中一组数据点上。...当使用Boken后端时,你可以结合滑块Bokeh工具探索图形,例如对它进行缩放平移

4.4K60

d3从入门到出门

选择元素 d3主要有两个选择器 select 选择相应dom元素, 如果有多个, 选择第一个 selectAll 选择所有的指定dom元素....段落2 段落3 元素增加 append 在选择元素增加一个子元素,..." age": " 33"} 事件 d3自然也可以监听相应事件。...由于使用数值与图片中长宽数值有一定差异,比如,图片长度为500,但是数值都是在10以内, 我们做出来图一定是需要尽量填充整个视图,所以需要对源数据做一定缩放, 下面介绍两类缩放d3本身有很多缩放函数...,所以d3有内置函数用于生成坐标轴 可选坐标轴 axisTop axisRight axisBottom axisLeft 上面的上下左右主要指坐标周刻度文字位置,比如axisTop是指文字在横轴上面

3K20
领券