Getting Started with D3 [Part 1]

最新推荐文章于 2023-05-15 13:46:23 发布

DesmengLiu

最新推荐文章于 2023-05-15 13:46:23 发布

阅读量848

点赞数

分类专栏： d3

d3 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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并不是什么难事。

纽约MTA（大都会捷运局总线）数据集
（译者注：MTA是什么不翻译了，纽约交通枢纽，我们这本书都是用它的数据来生成图表，数据是放在google上实时更新的，但是我们用压缩包里的json数据，所以并不需要太关注这个了，关于压缩包里文件组成也不介绍了，一看便知！）
服务器端数据
测试代码因为需要异步，所以需要放到服务器端，本书推荐的是Python的SimpleHTTPServer（可以放在本地的XAMPP中的hotdocs文件夹下面）