D3.js 是数据驱动的 JavaScript 可视化库，它能够帮助我们在前端界面中呈现数据。本文将详细介绍如何使用 D3.js 来实现数据更新和图表更新。
数据更新
在使用 D3.js 时，我们可以将数据与图表联系起来。当我们需要更新数据时，D3.js 提供了以下方法：
datum
datum 方法用于设置或获取绑定到选择元素的单个数据值。例如，我们有一个包含数字的数组，并将其绑定到一个 HTML 元素上：
----- ---- - --- -- -- -- --- ----- --- - ----------------- ----------------
现在，我们将每个数据项与元素的文本内容相匹配：
------------------ ------- -- -- ---------- ------- -- ---
这里的 data 方法返回一个数组，用于表示每个元素应该与哪个数据项相关联。然后，join 方法创建新的段落元素并返回其选择集。最后，我们使用 text 方法为每个段落元素填充文本。
如果我们想要添加新的数据项，只需将其添加到原始数据数组中，然后再次调用 datum 方法：
------------- ---------------- ------------------ ------- -- -- ---------- ------- -- ---
现在，我们的图表将显示一个新的段落元素，其中文本内容为 "6"。
data
data 方法与 datum 方法类似，但它用于设置或获取绑定到选择元素的数据数组。例如，我们有两个数组并想要将它们绑定到同一个 HTML 元素上：
----- ----- - --- -- --- ----- ----- - --- -- --- ----- --- - ----------------- ---------------- --------
现在，我们将每个数据项与元素的文本内容相匹配：
------------------ ------- -- -- ---------- ------- -- --------- ----
这里的 data 方法返回一个包含两个数组的数组，用于表示每个元素应该与哪些数据项相关联。然后，join 方法创建新的段落元素并返回其选择集。最后，我们使用 text 方法为每个段落元素填充文本。
如果我们想要添加新的数据数组，只需将其添加到原始数据数组中，然后再次调用 data 方法：
----- ----- - --- -- --- ---------------- ------ -------- ------------------ ------- -- -- ---------- ------- -- --------- ----
现在，我们的图表将显示一个新的段落元素，其中文本内容为 "7, 8, 9"。
图表更新
当数据更新时，我们可能需要相应地更新图表。D3.js 提供了以下方法来实现这一点：
enter
enter 方法用于将新数据绑定到新元素上。例如，我们要绑定一个包含数字的数组，并将其与段落元素相关联：
----- ---- - --- -- -- -- --- ----- --- - ----------------- ------------------ ----------- ---------- ------- -- ---
这里的 data 方法返回一个数组，用于表示每个元素应该与哪个数据项相关联。然后，join 方法根据需要创建新的段落元素并返回其选择集。最后，我们使用 text 方法为每个段落元
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/27026