3、D3入门指南：从基础到数据可视化

D3入门指南：从基础到数据可视化

在数据可视化领域，D3（Data-Driven Documents）是一个强大且广泛使用的JavaScript库。它允许开发者将数据与HTML、SVG和CSS结合，创建出交互式和动态的数据可视化效果。本文将带你逐步了解D3的基础用法，并通过实例展示如何使用D3进行数据可视化。

1. 向组元素添加矩形

首先，我们将创建一个示例，展示如何根据随机数据绘制多个矩形，并每几秒钟更新一次数据，观察D3如何响应这些变化。

1.1 示例效果

屏幕上矩形的大小和数量是随机确定的，颜色表示矩形是新增的还是现有矩形的更新。蓝色表示现有矩形被选中并更新，绿色表示新增的矩形。

具体过程如下：
1. 首次显示矩形时，屏幕上没有矩形，因此所有矩形都是新添加的，颜色为绿色。假设添加三个矩形，它们将显示为绿色。
2. 几秒钟后，数据更新。假设需要绘制五个矩形，我们将使用新数据更新现有的三个矩形，这些矩形将变为蓝色。同时，添加两个新矩形，颜色为绿色。
3. 再过几秒钟，数据再次更新。这次需要绘制四个矩形，我们将更新前四个矩形，使其变为蓝色，并移除最后一个不需要的矩形。

1.2 完整代码

function show() {
    'use strict';
    var margin = { top: 20, bottom: 20, right: 40, left: 40 },
        width = 800 - margin.left - margin.right,