D3.js是一个JavaScript库，用于根据数据处理文档。它使用HTML、CSS和SVG等技术，创建可以在任何现代浏览器上查看的数据可视表示形式。

它还为交互和动画提供了一些很棒的功能。在本教程中，我们将探讨D3.js的基本概念和功能。我们将在几个示例的帮助下学习如何使用它，例如渲染条形图，渲染HTML和SVG元素以及对其应用转换和事件。

D3入门

由于D3.js是一个JavaScript库，因此您只需将其包含在HTML文件中的script标签内即可。

DOM选择

使用D3.js，我们可以操作文档对象模型（DOM），这意味着我们可以选择元素并对其进行各种转换。让我们从一个简单的示例开始，在该示例中，我们将使用D3选择和更改标题标记的颜色和字体大小。

因此，我们只是将select()方法链接到d3对象上，然后更新style()。第一个参数指示我们要更改的内容，第二个参数给出值。结果如下：

数据绑定

您需要学习的下一个概念是数据绑定，因为这是D3最酷的功能之一。使用它，我们可以实时填充或操作DOM元素。

在我们的HTML中，我们有一个简单的无序列表<ul>：

我们要使用数据对象创建列表元素。这是执行此操作的代码：

在上面的JavaScript代码中，D3首先使用方法选择<ul>以及<li>内部的任何元素，在创建所有元素之前先选择所有元素似乎有些奇怪，但这就是D3的工作方式。select('ul').selectAll('li')，然后，我们使用data()方法传递数据，并添加enter()，其工作方式类似于循环。此后的所有操作将对fruits数组中的每个项目执行一次。

对于每个<li>标签，它还使用text()方法在其中附加文本，回调函数d内部的参数text()引用给定迭代中的数组元素（apple，mango等）。

所以这是我们的最终结果：

创建SVG元素

可伸缩矢量图形（SVG）是一种在DOM中呈现图形元素和图像的方法。由于SVG基于向量，因此既轻巧又可扩展。D3使用SVG来创建其所有视觉效果，因此它是库的核心构建块。

在下面的示例中，此处是使用SVG容器中的D3绘制的矩形。

在此代码中，D3正在DOM中渲染一个矩形元素。它首先选择SVG元素，然后在其中渲染一个矩形元素。它还使用attr()方法设置矩形的x和y坐标及其宽度，高度和填充属性。

创建条形图

D3还使我们可以创建许多不同类型的图表，以有效的方式表示数据。在下面的示例中，我们使用D3创建一个简单的条形图。

让我们从直接在HTML中创建SVG标签开始。

然后，我们将编写我们需要的JavaScript，以便在<svg>标签中呈现条形图：

在此代码中，我们有一个数字数组，这些数字将用于呈现条形图，数组中的每个项目都代表一个条。此外，我们还要了解：条形图只是宽度或高度可变的矩形。

选择SVG和矩形元素后，我们使用data()方法传递数据集并调用enter()以开始循环数据。

对于每个数据项，我们渲染一个矩形并将其宽度设置为其值。然后，我们设置每个小节的高度，并且为了避免重叠，我们通过从中减去1为它提供了一些填充barHeight。

然后，我们使用translate属性转换条形，该属性将使每个矩形一个接一个地定位，而不是从同一点开始。transform()采用一个回调函数，该函数获取其参数中的数据和索引。我们通过将索引乘以条形的高度来平移y轴上的矩形。

事件处理

最后，让我们看一下事件处理。D3还支持内置事件和自定义事件，我们可以使用其侦听器将其绑定到任何DOM元素。在下面的示例中，我们将click事件绑定到按钮，并将标题标签附加到其事件处理程序中的主体。

因此，当我们单击按钮时，将显示以下文本：

D3.js是一个非常强大而又简单的JavaScript库，它使您可以使用HTML，CSS和SVG来基于数据玩转文档并赋予其生命，快试一试吧！