后端开发教程 - Java、Spring Boot 实战 - msg200.com
React.js 和 D3 速成课程
介绍
我制作了一个关于如何使用 D3 和 React.js 的速成视频。你可以在这里观看。
对于大多数涉及创建标准图表的用例，由于 API 的复杂性，D3 并不实用。在本文中，我将尝试解释一些场景，在这些场景中，你会选择将 D3 与 React.js 结合使用，而不是使用更简单的图表库（例如 Recharts 或我之前文章中提到的那些）：
这些库在创建像我视频中那样的简单折线图方面做得非常出色。它们使用起来非常方便，并且提供了非常实用的开箱即用功能。我建议，对于大多数视觉和交互需求不太复杂的用例，你应该使用我上一篇文章中推荐的库。（如果你对 D3.js 不感兴趣，也可以直接跳到最后，看看我关于 Recharts 和 React-chartJs 的视频）
在本文的最后，如果您认为 D3 适合您的下一个项目或副项目，我将推荐其他可帮助您开始使用 D3 的资源。
什么是 D3.js？
首先让我们看看 D3.js 网站对 D3.js 的评价：
D3.js 是一个用于基于数据操作文档的 JavaScript 库。D3 帮助您使用 HTML、SVG 和 CSS 为数据注入活力。D3 注重 Web 标准，让您能够充分利用现代浏览器的功能，而无需依赖专有框架，并结合强大的可视化组件和数据驱动的 DOM 操作方法。
所以他们谈论的是数据可视化。D3.js 并非真正意义上的专用图表库，而是一组可视化和 DOM 操作组件。这些组件将帮助您构建具有自定义交互功能的、视觉震撼的数据可视化效果。D3.js 最吸引人的地方在于它拥有一些很棒的动画功能，并且拥有自己的 DOM 操作能力。从这两个示例中，我们来看一下它的图形处理能力。
您可以在https://bl.ocks.org/mbostock/1345853上查看此代码
您可以在https://bl.ocks.org/mbostock/3916621上看到此 d3 变形动画的代码
D3 容易学习吗？
在 D3 中，你需要操作底层 Dom 元素并处理 SVG 画布绘制概念。这有一个缺点，因为需要一定的学习时间才能理解 D3 方法链的查询类型结构。此外，还有一些将数据映射到 SVG 画布上的缩放函数，这需要一些数学知识。因此，仅仅为了创建标准图表而学习 D3 的开销有点太大了。
那么我应该什么时候使用 D3？
总而言之，您应该使用 D3，原因如下：
在 D3 中创建的理想可视化示例是构建如下动画树形图：
您可以在此处查看其代码https://bl.ocks.org/d3noob/8375092。
如何开始使用 React 和 D3.js？
我建议先从折线图开始，然后再逐步添加其他交互和动画功能。这就是我制作这个视频的原因。
请注意，这有点像速成课程，因此适合对 React 和 JavaScript 有一定了解的人。但如果您想熟悉 D3 的基本概念，请查看下一部分。我的视频涵盖了以下内容：
使用 D3 安装 React.js
在 React.js 中设置数据
使用 SVG 画布设置 JSX 并学习如何在 SVG 中绘制基本线条
设置并测试缩放函数，以便将数据映射到 SVG 画布上。您将学习的两个缩放函数是：
-
d3.scalePoint // 如果你要处理本质上是序数的数据，例如事物的类别或一周中的日子（星期一、星期二、星期三）等，则可以使用它
-
d3.scaleLinear // 您可以使用它来映射数字的、连续的、可测量的值。
使用d3.line函数生成绘制直线曲线的设置命令。
使用 d3.select 和 d3.selectAll 组件操作 DOM 元素。- 您可以添加/删除和更改属性。您也可以用它们在 SVG 中绘制内容。
了解如何使用轴组件 d3.axisBottom 和 d3.axisLeft生成并绘制带有标签的 X 轴和 Y 轴
还有哪些资源可以学习
Amelia Wattenberger 的一篇关于 React 和 D3 的博客文章是个不错的入门指南。这篇文章涵盖了基础知识，并涉及了其他涉及地图的复杂可视化。
Amelia 的博客还提供了整个 D3 库的可视化。这是一个非常有用的学习工具，可以让你更深入地了解 D3 API。
一个名为d3-graph-gallery的网站有一些很好的基本指南，但没有任何 React.js 示例。
d3indepth.com也有一些非常好的基础教程。
关于 Recharts 和 react-chartjs-2 的额外视频
如果您认为 D3 不适合您的需求，请查看我在 Recharts 和 react-chartjs-2 上流行的 React 图表视频。