【译】Learn D3 入门文档：Joins

引子

继 Learn D3: Animation 第七篇，只是英文翻译，可修改代码的部分用静态图片替代了，想要实时交互请阅读原文。

原文：Learn D3: Joins
版本：Published Mar 24, 2020
Origin
My GitHub

正文

如果你熟悉此教程中的 D3 ，你可能会惊讶于 D3 选择器被提及的如此之少。

那是因为你可能不需要它们！

D3 选择器适用一个特殊的定位：快速，动态图表的增量更新。如果你关注的是静态图表，或者每帧都可以从头开始重新绘制的图表，那么你可能更喜欢不同的抽象。另一方面，如果你想要动画过渡或从现代浏览器中榨取最佳性能，选择器适合你。

（即使你决定不使用选择器，请记住 D3 还有大量其它有用的可视化工具。比例尺、形状、插值器、颜色、地图投影和许多其它功能可用于 Canvas、WebGL 或其它 DOM 抽象，如 Observable 的 HTML 标记模板文字、React 或 Svelte 。D3 还可以使用统计、分组和聚合、时间序列和解析的方法，协助数据清理和分析。）

本质上，D3 选择器指定的是转换而不是表示。你可以指定将当前状态转换为所需状态所做的更改（插入、更新和删除），而不是表示图表（DOM）的所需状态。这有时很乏味，但允许你设置过渡动画，并最小化对 DOM 的更改，从而提高性能。

让我们看看如何做。

假设我们想显示字母表中的字母。虽然不是很直观，但我们将保持简单，以专注于技术(有关实际的示例，请参见 D3 图库的动画和交互部分。）

这个图表是静态的，因为它是在每次单元运行时从头开始创建的，这使得 D3 代码在本质上等同于 HTML 文本。

那么，何必要用选择器呢？对，对于静态图表，没有什么理由这样做。

但假设你想更新此图表以响应不断变化的数据。并且你不想从头开始重新绘制，希望应用最小的更新集来反映新数据。你希望重用现有元素，添加需要的元素，删除不需要的元素。只需将上述代码移动到一个在数据更改时调用的方法中，你就可以获得高性能的增量更新！

【译】Learn D3 入门文档：Joins相关推荐

UniRx官方入门文档
UniRx 官方文档翻译 UniRx官方入门文档 UniRx入门系列一 UniRx入门系列二 UniRx入门系列三 UniRx入门系列四 UniRx入门系列五 UniRx 基于Unity的响应式编程框 ...
一份其实很短的 LaTeX 入门文档
一份其实很短的 LaTeX 入门文档优雅的 LaTeX 有很多 Geeks 或者 LaTeX's Fanatical Fans 过分地强调了 LaTeX 的一些并非重点的特性,以至于很多初学者会觉得 ...
Entity Framework Core 中文入门文档
点击链接查看文档: Entity Framework Core 中文入门文档转载于:https://www.cnblogs.com/ideck/p/efcore.html
CAN总线入门、LIN总线入门文档-蓝凑云下载。 LDFEditor下载 ISO-14229、15765、11898下载与阅读
这两个入门文档: 中文版.讲解得全面又详细,初学者值得一看. 一.CAN总线入门-瑞萨版 1)https://wwe.lanzoui.com/igt4hit08je2)链接:https://pan.b ...
Android入门文档
该文章为网络材料整理,部分内容经过重新编写. 一. 名词介绍 JDK:Java Development Kit Java 语言的软件开发工具包 JRE:Java Runtime Environment ...
CloudEvents 入门文档
CloudEvents 入门文档 - 1.0.3 版本文档来自:GitHub CloudEvents 摘要这份非技术规范文档用来为你提供关于 CloudEvents 规范的总体概览.它补充了 Cl ...
matlab入门文档
博主太赞了,把文档搬运好了:https://blog.csdn.net/in_nocence/article/details/78358614 matlab自带的入门文档,我看了半天的英文,脑阔疼但 ...
AGM AG32VF407VGT6（248M主频MCU + 内置2KLE CPLD）开发入门文档
AGM AG32VF407VGT6(248M主频MCU + 内置2KLE CPLD)开发入门文档第一章:器件特性概述产品概述: AGM32系列32位微控制器旨在为MCU用户提供新的自由度和丰富的兼 ...
Pushy入门文档中文翻译
本文为博主原创,允许转载,但请声明原文地址:http://www.coselding.cn/article/2016/12/01/Pushy入门文档中文翻译/ pushy 这是我自己的翻译版本,原文地 ...

【译】Learn D3 入门文档：Joins

引子

正文

【译】Learn D3 入门文档：Joins相关推荐

最新文章

热门文章