构建动画组件，或者 React 如何让 D3 变得更好

D3 很棒。作为Web数据可视化世界的jQuery，它可以做你能想到的一切。 Play Next Unmute Current Time Duration 2:00 Fullscreen Backward Skip 10s Play Video Forward Skip 10s 您在网上看到的许多最佳数据可视化都使用 D3。这是一个很棒的库，随着最近的 v4 更新，它变得比以往更加强大。 添加 React，您可以使 D3 变得更好。 就像 jQuery 一样，D3 功能强大但级别较低。你的可视化越大，你的代码就越难使用，你花在修复错误和费尽心思的时间就越多。 React 可以解决这个问题。 您可以阅读我的书《React+d3js ES6》以获得深入的见解，或者继续阅读以了解如何最好地集成 React 和 D3 的概述。在一个实际示例中，我们将了解如何构建声明性的、基于转换的动画。 本文的一个版本也作为YouTube 上的 D3 聚会演讲存在。 React 值得吗？ 好吧，React 很大。




它向您的有效负载添加了大量代码，并增加了您的依赖足迹。这是另一个您必须保持更新的库。 如果您想有效地使用它，您将需要一个构建步骤。将JSX 代码转换为纯 JavaScript 的东西。 现在设置 Webpack 和 Babel 很简单：只需运行create-react-app. 它为您提供 JSX 编译、现代 JavaScript 功能、linting、热加载和生产构建的代码缩减。这很棒。 尽管 WhatsApp 号码数据 规模和工具复杂，React还是值得的，特别是如果您认真对待可视化的话。如果您正在构建一个永远不需要维护、调试或扩展的一次性产品，请坚持使用纯 D3。如果您正在构建一些真实的东西，我鼓励您将 React 添加到其中。 对我来说，主要的好处是 React强烈鼓励你组件化你的代码。其他好处要么是组件化的症状，要么是由组件化带来的。 将 React 与 D3 代码结合使用的主要好处是： 组件化 更容易测试和调试 智能 DOM 重绘 热加载 组件化鼓励您将代码构建为一系列逻辑单元（组件）。





通过 JSX，您可以像使用 HTML 元素一样使用它们。我们将在下一节中更深入地探讨这一点。 将可视化构建为一系列组件可以更轻松地测试和调试。您可以一次专注于一个逻辑单元。如果一个组件在这里工作，那么它在那里也可以工作。如果它通过了测试并且看起来不错，那么无论您渲染它的频率如何，无论您将其放在哪里，也无论谁调用它，它都会通过测试并且看起来不错。了解代码的结构，因此它知道如何仅重绘发生更改的组件。不再需要费力地决定重新渲染什么以及保留什么。只需改变并忘记即可。React 可以自己解决这个问题。是的，如果您查看分析工具，您会发现只有发生更改的部分才会重新渲染。 启用 Flash Paint 的动画字母表 为了create-react-app配置你的工具，React 可以利用热加载。假设您正在构建 30,000 个数据点的可视化。使用纯 D3，每次代码更改都必须刷新页面。