保持联系
印度班加罗尔
[电子邮件 protected]
电话:+91 8919786847
工作查询
[电子邮件 protected]
电话:+91 8919786847

反应D3:这里’关于它的一切定义

反应D3简介

反应D3是JavaScript中预先存在的库,用于 在浏览器中可视化数据。它实际上是实用程序方法的集合,但是它的API非常庞大!除非您决心学习和巩固自己的知识,否则D3.Js的学习极其困难而臭名昭著。在这种情况下,它变得非常有趣!

因此,您渴望为您的网站学习并创建惊人的数据可视化吗?然后跳进w

事不宜迟!

什么是React D3?

虽然在我们看来D3.Js是一个周围的框架,但实际上它是 众多小模块。下图中显示了D3.Js中存在的各种模块。请记住,圆圈的大小类似于图中的模块的大小:

 

获取数据:

我们都知道,在可视化数据时,我们要做的第一件事当然就是获取数据!最简单的方法之一是将数据存储在 静态的 文件和 它。

  • d3获取: 此模块为我们提供了一些实用程序方法,这些方法将从文件中获取数据,然后将其解析为JavaScript对象。这是一个很小的库,其中包含8个文件,每个文件最多包含8行代码。 d3可以从中解析文件的几种数据格式如下:
  • JSON格式 (JavaScript对象表示法)
  • DSV (定界符分隔的值)以及 CSV (逗号分隔值)和 硅通孔 (制表符分隔值)
  • 还支持其他格式,您可以在其中存储数据,例如: svg,图片,html和xml

 

  • d3-dsv: 该模块包含许多在 JavaScript对象 卫星电视 格式。它还包含一些命令行实用程序,用于在 具有各种定界符,dsv和JSON的dsv。

数据处理:

因此,到目前为止,我们已经获得了数据,此后,我们需要将其处理为可以使用的格式。 D3由一些模块组成,这些模块在查询和转换数据方面非常有帮助:

 

  • D3阵列: 

优点: 

    • 可以执行 基本统计资料。
    • 能够 有关订单的问题
  • 转变
  • 装箱

            缺点:

  • 昂贵的数据处理
  • 本机JavaScript方法


  •   D3 random: 该模块使您可以创建具有特定分布的随机数。
  • 其他: 中的一些方法 d3。层次结构 (d3。层次结构())。 此方法将数据转换为可以可视化的特定嵌套结构。 

DOM的操作:

 

  • D3选择模块:  如果您想在DOM中为数据集中存在的每个项目添加一个项目,我们很可能会使用 for循环。 这可能需要很多工作,但同时也很容易。但是,如果您希望每次数据更改时都使DOM的元素与数据保持同步,那么如果没有DOM的帮助,这将成为很多工作。 d3选择 模块。此方法创建一个 d3选择 目的 其中包含许多辅助方法。

 

  • D3选择多: 该模块有更新方法 样式 属性 只能在DOM中更新的元素 每次通话一个值。  

绘制SVG形状: 

为了可视化数据,我们发现需要将数据集表示为形状。要绘制这些形状,我们需要以下内容:

  • 基本DOM元素
  • 帆布
  • WebGL
  • SVG


  • D3形状: 该模块包含复杂的形状,可帮助我们更好地可视化数据。我们可以在SVG或Canvas上创建以下形状:
  • 弧线
  • 线数
  • 曲线
  • 链接
  • 符号
  • 堆栈


  • D3路径: 这也是一种浮出水面的基本方法。使用d3路径,我们可以在使用创建的形状之间创建自己的自定义路径 d3形状


  • D3多边形: 它是一个小模块,具有一些实用功能来处理多边形(可以表示为一系列 [x,y]。

 

处理颜色: 

 

在数据可视化中,当有人使用色标表示数据集中的矩阵时,处理颜色甚至是一个重要的概念。尽管颜色操作非常重要,但是尚不存在处理颜色的本地方法。 

  • 颜色关键字: 当前,CSS中存在148个颜色关键字,其中两个额外的值是透明的(没有特定颜色),而currentColor继承了CSS颜色的属性。 
  • RGB颜色: RGB表示红色,绿色和蓝色,可以用各种不同的方式声明。
  • HSL颜色: HSL表示色相,饱和度和亮度,它们也具有不同的声明方式。
  • 系统颜色: 它们是CSS的有效颜色,但并非所有操作系统都支持它们。它们不能用作d3.color()的输入

 

处理日期时间

JavaScript中存在一个本机Date对象,该对象精确地表示毫秒。可以使用d3.timeParse()将字符串转换为Date。 D3时间通常很方便,建议您熟悉API。

  • .floor()、. round()和.ceil()用于在起点,最接近的边界或终点创建日期。
  • .offset()用于将Date偏移一定的时间间隔。
  • .range(),用于为特定开始日期和结束日期之间的每个间隔创建日期数组。
  • .count()用于返回可以在指定的两个日期之间设置的间隔数。

脚步:

为了创建一个简单的React Web应用程序,我们可以使用Create React App。 Create React App提供了不错的初学者体验,因此,如果您是初学者并且刚刚开始学习React,那么Create React App将非常适合您。

  1. 首先,创建一个新的应用程序,它可以称为my-d3-app。对于创建,我们将使用npx create-react-app my-d3-app。然后,使用cd my-d3-app将目录更改为创建的文件夹。
  2. 然后我们安装D3,然后执行npm install d3–save.
  3. 接下来,通过将import *作为d3从d3运行,将D3导入App.js。由于D3没有默认的导出模块,因此我们需要导入*(“导入所有内容”)。

DOM选择

D3使DOM的操作变得容易。不仅是D3,React库还可以操纵DOM。因此,我们需要做一些额外的工作才能使React库和D3一起工作。但是我们很幸运,React已经有了一个可用的解决方案,因为它允许定向和更新DOM元素。为此,React使用引用。

 

将元素附加到DOM: 

一旦确定了要操作的元素,就可以随时开始向其中添加更多元素。例如,如果我们有一个列表,我们总是可以使用D3将一个新的列表项添加到现有列表中。

使用数据创建: 

通过选择DOM元素并使用.data()将数据附加到D3上,我们可以使D3意识到我们的数据。 D3中一种称为.enter()的方法,通常用于处理数据。这表示需要将这些数据元素添加到DOM。 .enter()有一个对应项,称为.exit(),用于表示数据中不再存在但在DOM中确实存在的元素。我们可以结合使用.exit()和.remove从DOM中删除那些元素。

 

属性作为函数: 

可以使用D3中的函数来设置样式,属性等元素属性。我们还可以利用箭头功能将数据点的值作为输入并返回以“度”为单位的值。如果我们想利用元素来发挥创造力,那么function属性可以使我们做到这一点。我们可以看一下D3官方文档中的示例,其中通过使用函数来设置元素样式的属性,从而将选定的段落设置为随机颜色。 

我们可以像使用任何函数一样使用这些条件。但是,繁琐的工作正在添加内联样式。为此,我们可以使用类和ID代替,以便我们可以在CSS中设置样式。对于设置类和ID之类的属性,我们可以使用.attr()。 

 

过渡动画

D3使过渡的动画变得容易。我们可以使用.duration()设置动画的持续时间。函数也可以与过渡一起使用。官方文档中的以下示例可以使用delay()函数一次使​​一个圆圈出现,该函数采用dataPoint并将eartion作为其设置参数。它返回迭代乘以10。 

迭代是指数据点在数据列表中的位置。

结论: 

 

当我们刚开始时,D3可能看起来非常困难且令人不知所措,但是一旦我们了解了基础知识,便成为了表达和可视化数据的强大工具。强烈建议使用D3,而不要使用任何其他现成的图表库,因为D3使我们能够对数据有更个性化和可修改的体验。同样,学习D3是使流利地操作DOM的一种很好的方法。对DOM的理解非常关键,’通常是前端开发人员所追求的质量。

 

作者头像
QuikieApps
//www.qinheli.com.cn/blog

发表评论

您的电子邮件地址不会被公开。 必需的地方已做标记 *

我们使用cookie为您提供最佳体验。