当前位置: 首页 > 编程笔记 >

d3.js 坐标系

韩志专
2023-03-14
本文向大家介绍d3.js 坐标系,包括了d3.js 坐标系的使用技巧和注意事项,需要的朋友参考一下

示例

在正常的数学坐标系中,点x = 0,y = 0位于图形的左下角。但在SVG坐标系中,此(0,0)点位于“画布”的左上角,当您将位置指定为绝对/固定并使用顶部和左侧控制位置时,它有点类似于CSS。元素的确切点。

必须牢记的是,随着SVG中y的增加,形状会向下移动。

假设我们要创建一个散点图,每个点对应于ax值和y值。要缩放该值,我们需要像这样设置域和范围:

d3.svg.scale()
  .range([0, height])
  .domain([0,max])

但是,如果仅保留这样的设置,则这些点将基于顶部水平边缘而不是我们期望的底部水平线。

d3的好处是,您可以通过在域设置中进行简单的调整来轻松更改此设置:

d3.scale.linear()
  .range([height, 0])
  .domain([0, max])

使用上面的代码,域的零点对应于SVG的高度,该高度是查看者眼中图表的底线,同时,源数据的最大值将对应于SVG的零点座标系统,这对于观看者来说是最大值。

 类似资料:
  • 我试图用从Web服务获取的数据重新创建GitHub上显示的交互式流图。我使用与GitHub上的示例相同的代码来生成图形,但是我得到的是路径元素的MNaN和NaN坐标(确切地说,是它们的d属性)。结果是一个空图形,其中仅绘制x轴和y轴,而仅绘制其他轴。 为方便起见,以下是生成数据集的web服务的代码(C#): 编辑1:我忘记将数据集成员的定义添加为C#类。我知道这个问题可能已经在其他问题堆中丢失了,

  • D3(Data-Driven Documents 或 D3.js)是一个 JavaScript 库,用于使用 Web 标准将数据可视化。D3 帮助你使用SVG、 Canvas 和 HTML 将数据变为现实。D3 将强大的可视化和交互技术与数据驱动的DOM操作方法相结合,让你拥有现代浏览器的全部功能,并可以自由地为您的数据设计合适的可视化界面。

  • 我一直试图将新西兰使用的横向墨卡托投影(http://www.linz.govt.nz/data/geodetic-system/datums-projections-and-heights/projections/new-zealand-transverse-mercator-2000)的一些变体NZTM2000转换为WSG84的方位/经度坐标,但没有成功。 NZTM2000规范规定TM配置有以

  • 本文向大家介绍使用js获取鼠标坐标相关面试题,主要包含被问及使用js获取鼠标坐标时的应答技巧和注意事项,需要的朋友参考一下

  • D3.js是一个JavaScript库,用于在浏览器中创建交互式可视化。 D3库允许我们在数据集的上下文中操纵网页的元素。 这些元素可以是HTML,SVG或Canvas元素,可以根据数据集的内容进行引入,删除或编辑。 它是一个用于操作DOM对象的库。 D3.js可以成为数据探索的宝贵帮助。 它使您可以控制数据的表示,并允许您添加数据交互性。 与其他库相比,D3.js是最重要的框架之一。 这是因为;

  • 本文向大家介绍d3.js 使用D3 js创建SVG元素,包括了d3.js 使用D3 js创建SVG元素的使用技巧和注意事项,需要的朋友参考一下 示例 尽管D3并非专门用于处理SVG元素,但它已广泛用于创建和处理基于SVG的复杂数据可视化。D3提供了许多强大的方法,可帮助轻松创建各种几何SVG结构。 建议首先了解SVG规范的基本概念,然后使用大量的D3 js示例创建可视化效果。 D3 JS范例 SV