《Getting Started with D3》中文翻译(第一章）_getting started 翻译-优快云博客

本文深入探讨了D3库在数据可视化领域的应用，从基础概念到实际案例，指导如何使用JavaScript语言结合HTML、CSS、SVG或Canvas元素进行动态图形设计。以纽约MTA数据集为例，演示了从数据加载到可视化生成的全过程，并介绍了服务器端数据处理的方法。通过实例学习，读者将掌握如何构建动态、交互性强的可视化界面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Getting Started with D3

CHAPTER 1 第一章介绍

注：源码压缩包请到https://github.com/mikedewar/getting_started_with_d3下载，里面有学习所用的json文件

数据的可视化是一个老话题了。一直以来，我们总是通过这样或那样的方式来展现收集到的数据——这可以追溯到距今143年前，Minard画出了著名的《拿破仑东征图》（见下图）

译者注：拿破仑东征图又称《拿破仑征俄战役图》堪称信息可视化领域的骨灰级教材，是每一个信息可视化入门者的必修。1861年法国工程师Charles Joseph Minard绘制了1812年拿破仑征俄战役图，此图揭示了导致士兵大量死亡的元凶是低温。

现在，虽然我们进入了超速运转的时代（一方面是海量数据的激增，一方面是我们数据分析的发展和成熟），但是当我们渴望拥有更先进的可视化界面时，如：为上千万人创建动态的，互动性的图形，结合了最新一代浏览器的互联网为我们提供了这个绝佳的机会。

JavaScript是现代浏览器的一种语言，卟啦卟啦卟啦.....（译者注：js就不多介绍了,唯一注意的是对于ie，D3支持ie9以上）

D3

D3是Mike Bostock所写的一个js库，脱胎于早期的一个可视化工具集 Protovis。D3可以让我们从数据集中操作网页元素，这些网络元素包括HTML，SVG或者Canvas元素，还可以根据数据集完成各种操作，例如，创建一个散点图，我们用D3来排列SVG圆点，圆点的cx，cy属性被设置在数据集的x，y中，然后转换刻度值，从整数值转换为像素值。

D3一个巨大的优势是你不用再学习一门新的绘图语言，它完全建立在html+js+css上，如果你对jquery很熟，那么你会发现D3没有什么学习曲线，你可以用你熟悉的工具来设计了，如，firebug或Developer Tools。

不同于传统的图形化工具，它们常常在设计者和网页中间设置一个中间层，D3把焦点集中于提供处理普通任务的helper函数（如创建轴与刻度）和处理高级任务（如创建可视化图像或和弦图）上。这意味着如果你经过了D3的学习曲线后，你就进入了一个动态的，可交互的，更加先进的可视化的世界！

基本设置

D3库可以从http://d3js.org网站下载，模板结构如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="d3.js"></script>   
    <script>
    function draw(data) {                                                                                                                                 
    "use strict";
 // badass visualization code goes here}
    </script>
</head>
<body>
    <script>
        d3.json("data/some_data.json", draw); 
    </script>
</body>
</html>

draw，本书贯穿讲这个方法，这是有一个参数的function，当data成功下载到客户端时它将执行，它将生成可视化所需的大段代码。

“use strict” 这句话表明我们用JSLint来写严格的js代码（译者注：其是一个JavaScript验证工具，可以扫描JavaScript源代码来查找问题。）

d3.json() function ，第一个参数是url，第二个参数是回调函数（我们总是缺省叫它draw），它会传递一个唯一的参数——json作为一个对象或数组，虽然D3也能传递xml或csv，但是本书只用json传输。

本书的教学方法是从例子出发的，这意味着教学的前几步可能会做几个并不美观的页面，我们首先不考虑css，等熟悉后添加css并不是什么难事。