一直想好好学学Web数据可视化神器D3，可是忙于开发代码盒子,还有其他琐事，没有动手。
现在代码盒子Beta上线了，有了自家的平台，也有了点时间，再也找不到借口了。
借着海子的诗，
从明天起，做一个幸福的人
喂马、劈柴，周游世界
从明天起，关心粮食和蔬菜
我有一所房子，面朝大海，春暖花开
从明天起，和每一个亲人通信
告诉他们我的幸福
那幸福的闪电告诉我的
我将告诉每一个人
给每一条河每一座山取一个温暖的名字
陌生人，我也为你祝福
愿你有一个灿烂的前程
愿你有情人终成眷属
愿你在尘世获得幸福
我只愿面朝大海，春暖花开
许个愿望
从明天起，做一个幸福的人
学点D3,写点代码，周游世界
从明天起，关心粮食和蔬菜
我有一所房子，面朝大海，春暖花开
不等明天了，现在就开始吧。
参考资料
- D3 官网: https://d3js.org/
- D3 Github仓库: https://github.com/d3/d3
- D3 创始人，Mike Bostock搞的在线数据可视化平台：https://observablehq.com/
- 书：Interactive Data Visualization for the Web, 2nd Edition， Scott Murray
本文的代码盒子编号为25号，在PC上访问： https://daima.co/25
D3简介
D3，也称D3.js，是Data Drive Document的缩写。Data由用户提供，Document指的是Web的Document，D3负责驱动，连接Data和Document。
D3的主要创始人是大神Mike Bostock。盗个官方图像：
Mike Bostock
大伙自己去他的Wiki页看看他的介绍吧。
D3做什么
- D3将数据加载到浏览器内存
- D3将数据绑定到web document,根据需要创建新的web元素
- 解析绑定的数据，设置对应的可视化效果，转换web元素
- 根据用户输入，转换元素状态
D3不干什么
- D3不提供预先定义好的可视化图像。D3的定位是底层库，用户或第三方库利用D3,生成可视化效果。
- D3不支持旧的浏览器。当然这里指很老的浏览器比如IE8。D3和IE9、以及Chrome、Firefox等都有很好的兼容性。
- D3核心模块不支持位图操作。D3擅长矢量图片如SVG，有第三方插件支持位图操作，比如d3-tile
- D3不隐藏用户数据。D3在浏览器端运行，如果用户对数据保密有很高要求，只能在服务器端渲染，要么不用D3,要么采用特殊的服务器端预渲染生成图片，不过这就不支持前端互动了。
设置学习、测试环境
利用cdnjs提供的免费cdn服务，用script标签导入D3。
<code><
script
src
="https://cdnjs.cloudflare.com/ajax/libs/d3/6.2.0/d3.min.js"
integrity
="sha512-C2RveGuPIWqkaLAluvoxyiaN1XYNe5ss11urhZWZYBUA9Ydgj+hfGKPcxCzTwut1/fmjEZR7Ac35f2aycT8Ogw=="
crossorigin
="anonymous"
>script
>/<code>
框架页面代码：
<code> ><
html
lang
="en"
><
head
><
meta
charset
="utf-8"
><
title
>D3开发页面模板title
>head
><
body
><
script
src
="https://cdnjs.cloudflare.com/ajax/libs/d3/6.2.0/d3.min.js"
integrity
="sha512-C2RveGuPIWqkaLAluvoxyiaN1XYNe5ss11urhZWZYBUA9Ydgj+hfGKPcxCzTwut1/fmjEZR7Ac35f2aycT8Ogw=="
crossorigin
="anonymous"
>script
>body
>html
>/<code>
本文的代码盒子编号为25号，在PC上访问: https://daima.co/25
测试一下
我们用这段代码做个测试，看看环境设立成功了没有：
<code>d3
.select
("body"
).append
("h1"
).text
("Hello D3!"
);/<code>
暂时还没有涉及到可视化。不过您可能已经发现了，D3其实可以拿来当jQuery，操作DOM，也有人真这样用。不过这不是D3的设计目的。
设置成功：
开发环境测试成功
抄一段别人的演示代码，看看可视化效果
条状图出来了。代码就不解释了，主要是测试下可视化环境搭建好了没有。
预告：下一篇将研究D3的核心概念 data binding，数据绑定
