d3.js 数据更新_如何使用D3.js的常规更新模式

d3.js 数据更新

关于使用动态数据集实现可视化模块的导览 (A guided tour on implementing visualization modules with dynamic datasets)

It is common to remove the existing Scalable Vector Graphics (SVG) element by calling d3.select('#chart').remove(), before rendering a new chart.

通常在渲染新图表之前，通过调用d3.select('#chart').remove()来删除现有的可缩放矢量图形(SVG)元素。

However, there may be scenarios when you have to produce dynamic visualizations from sources such as external APIs. This article will show you how to do this using D3.js.

但是，在某些情况下，您必须从外部API等来源生成动态可视化效果。 本文将向您展示如何使用D3.js。

D3.js handles dynamic data by adopting the general update pattern. This is commonly described as a data-join, followed by operations on the enter, update and exit selections. Mastering these selection methods will enable you to produce seamless transitions between states, allowing you to tell meaningful stories with data.

D3.js通过采用常规更新模式来处理动态数据。 通常将其描述为数据联接，然后是输入，更新和退出选择的操作。 掌握这些选择方法将使您能够在状态之间进行无缝转换，从而使您可以用数据讲述有意义的故事。

入门 (Getting Started)

要求 (Requirements)

We will be building a graph that illustrates the movement of a few Exchange-Traded Funds (ETFs) over the second half of 2018. The graph consists of the following tools:

我们将建立一个图表，说明一些交易所买卖基金(ETF)在2018年下半年的走势。该图表包含以下工具：

1. Closing price line chart

   收盘价折线图

2. Trade volume bar chart

   交易量条形图

3. 50-day simple moving average

   50天简单移动平均线

4. Bollinger Bands (20-day simple moving average, with standard deviation set at 2.0)

   布林带 (20天简单移动平均线，标准偏差设置为2.0)

5. Open-high-low-close (OHLC) chart

   开-高-低-关闭( OHLC )图表

6. Candlesticks

   烛台

These tools are commonly utilized in the technical analysis of stocks, commodities, and other securities. For example, traders may make use of the Bollinger Bands and Candlesticks to derive patterns which represent buy or sell signals.

这些工具通常用于股票，商品和其他证券的技术分析。 例如，交易者可以利用布林线和烛台来得出表示买入或卖出信号的形态。

This is how the graph will look like:

该图将如下所示：

This article aims to equip you with the fundamental theories of data joins and the enter-update-exit pattern in order to allow you to easily visualize dynamic datasets. In addition, we will be covering selection.join, which is introduced in D3.js’s v5.8.0 release.

本文旨在为您提供数据连接的基本理论和enter-update-exit模式，以便使您轻松可视化动态数据集。 此外，我们将覆盖selection.join ，这是在D3.js的V5.8.0版本中引入的。

常规更新模式 (The general update pattern)

The gist of the general update pattern is the selection of Document Object Model (DOM) elements, followed by binding of data to these elements. These elements are then created, updated or removed, to represent the necessary data.

常规更新模式的要点是选择文档对象模型(DOM)元素，然后将数据绑定到这些元素。 然后创建，更新或删除这些元素，以表示必要的数据。

联接新数据 (Joining new data)

Data join is the mapping of n number of elements in the dataset with nnumber of selected Document Object Model (DOM) nodes, specifying the required action