3、D3入门：从基础到实战数据可视化

D3入门：从基础到实战数据可视化

一、D3基础：动态矩形示例

在开始使用D3进行数据可视化之前，我们先通过一个动态矩形的示例来了解D3的核心功能，即如何将数据绑定到元素上。

1. 示例概述

我们将创建一个示例，根据随机数据显示一定数量的矩形。每几秒钟更新一次数据，观察D3如何响应这些变化。矩形的大小和数量是随机确定的，颜色表示矩形是新增的还是现有矩形的更新。蓝色表示现有矩形被选中并更新，绿色表示新增的矩形。

以下是具体的工作流程：
1. 首次显示矩形 ：屏幕上没有矩形，所有矩形都是新添加的，颜色为绿色。假设添加三个矩形，它们都会显示为绿色。
2. 数据更新后 ：假设需要渲染五个矩形。我们将更新现有的三个矩形，这些矩形将变为蓝色。同时，添加两个新的绿色矩形。
3. 再次更新数据 ：假设需要渲染四个矩形。这意味着更新前四个矩形，将它们变为蓝色，并移除最后一个不再需要的矩形。

2. 完整代码及解析

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