QuikieApps

反应D3:关于它的所有定义

反应D3简介

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

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

事不宜迟!

什么是React D3?

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

 

获取数据:

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

 

数据处理:

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

 

优点: 

            缺点:


DOM的操作:

 

 

绘制SVG形状: 

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




 

处理颜色: 

 

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

 

处理日期时间

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

脚步:

为了创建一个简单的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的理解非常关键,并且通常是前端开发人员中每个人都希望获得的质量。

 

Exit mobile version