切图 从设计稿中切除网页的素材并在代码中引入图片 (复杂的图片或者解决兼容问题)// 设计稿 (*.psd) -> 产出物 (*png, *.jpg)<img src="/project/fend_note/images/avatar.jpg" alt="desc"><style type="text/css" media="screen"> background-image: url(../../img/sprite.png); background-position: 0 0;</style>
[TOC]网页发展史Web 1.0 -> Web 2.0（基于 Ajax） -> Web 3.0 （基于 HTML5）网站开发协作流程前端职责视觉稿（配色图标距离空间） + 交互稿（用户逻辑） = UI（用户界面）视觉稿 -> 页面制作交互稿 -> 页面逻辑开发所需技能DOM (操作 HTML 及 CSS 的接口)JavaScript (定义页面互动)CSS (定义页面样式)HTML (定义页面结果)Photoshop (取图)
前端开发笔记本的 GitHub 项目地址在这里。如果你觉得这个项目不错，请点击 Star 一下，您的支持是我最大的动力。Star Watch Fork Download《前端笔记本》涵盖了 Web 前端开发所需的全部基本知识以及所对应的学习路径。它并不能当做一本完整的学习材料来进行前端的学习，因为在有限的篇幅中无法深入的展开每一个单独的知识点。
本章以中国地图为例，介绍地图的制作方法。在数据可视化中，地图是很重要的一部分。很多情况会与地图有关联，如中国各省的人口多少，GDP多少等，都可以和地图联系在一起。地图数据的获取制作地图需要 JSON 文件。JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。关于 JSON 的语法格式，可以学习【JSON 浅谈】系列。
树状图，可表示节点之间的包含与被包含关系。数据初始数据先写在一个 JSON 文件中，再用 D3 来读取。JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。关于此格式的简介和语法规则，可分别参见两篇文章：JSON 简介和JSON 语法规则。
力导向图（Force-Directed Graph），是绘图的一种算法。在二维或三维空间里配置节点，节点之间用线连接，称为连线。各连线的长度几乎相等，且尽可能不相交。节点和连线都被施加了力的作用，力是根据节点和连线的相对位置计算的。根据力的作用，来计算节点和连线的运动轨迹，并不断降低它们的能量，最终达到一种能量很低的安定状态。力导向图能表示节点之间的多对多的关系。
本章制作一个饼状图。在布局的应用中，最简单的就是饼状图，通过本文你将对布局有一个初步了解。数据有如下数据，需要可视化：var dataset = [ 30 , 10 , 43 , 55 , 13 ];这样的值是不能直接绘图的。例如绘制饼状图的一个部分，需要知道一段弧的起始角度和终止角度，这些值都不存在于数组 dataset 中。因此，需要用到布局，布局的作用就是：计算出适合于作图的数据。
布局，可以理解成 “制作常见图形的函数”，有了它制作各种相对复杂的图表就方便多了。布局是什么布局，英文是 Layout。从字面看，可以想到有“决定什么元素绘制在哪里”的意思。布局是 D3 中一个十分重要的概念。D3 与其它很多可视化工具不同，相对来说较底层，对初学者来说不太方便，但是一旦掌握了，就比其他工具更加得心应手。
与图表的交互，指在图形元素上设置一个或多个监听器，当事件发生时，做出相应的反应。什么是交互交互，指的是用户输入了某种指令，程序接受到指令之后必须做出某种响应。对可视化图表来说，交互能使图表更加生动，能表现更多内容。例如，拖动图表中某些图形、鼠标滑到图形上出现提示框、用触屏放大或缩小图形等等。用户用于交互的工具一般有三种：鼠标、键盘、触屏。
Update、Enter、Exit 是 D3 中三个非常重要的概念，它处理的是当选择集和数据的数量关系不确定的情况。什么是 Update、Enter、Exit前几章里，反复出现了形如以下的代码。svg.selectAll("rect") //选择svg内所有的矩形 .data(dataset) //绑定数组 .enter() //指定选择集的enter部分 .
D3 支持制作动态的图表。有时候，图表的变化需要缓慢的发生，以便于让用户看清楚变化的过程，也能给用户不小的友好感。什么是动态效果前面几章制作的图表是一蹴而就地出现，然后绘制完成后不再发生变化的，这是静态的图表。动态的图表，是指图表在某一时间段会发生某种变化，可能是形状、颜色、位置等，而且用户是可以看到变化的过程的。
一个完整的柱形图包含三部分：矩形、文字、坐标轴。本章将对前几章的内容进行综合的运用，制作一个实用的柱形图，内容包括：选择集、数据绑定、比例尺、坐标轴等内容。添加 SVG 画布//画布大小var width = 400;var height = 400;//在 body 里添加一个 SVG 画布 var svg = d3.select("body") .append("svg") .attr("width", width) .
坐标轴，是可视化图表中经常出现的一种图形，由一些列线段和刻度组成。坐标轴在 SVG 中是没有现成的图形元素的，需要用其他的元素组合构成。D3 提供了坐标轴的组件，如此在 SVG 画布中绘制坐标轴变得像添加一个普通元素一样简单。
比例尺是 D3 中很重要的一个概念，上一章里曾经提到过直接用数值的大小来代表像素不是一种好方法，本章正是要解决此问题。为什么需要比例尺上一章制作了一个柱形图，当时有一个数组：var dataset = [ 250 , 210 , 170 , 130 , 90 ];绘图时，直接使用 250 给矩形的宽度赋值，即矩形的宽度就是 250 个像素。
柱形图是一种最简单的可视化图标，主要有矩形、文字标签、坐标轴组成。本文为简单起见，只绘制矩形的部分，用以讲解如何使用 D3 在 SVG 画布中绘图。画布是什么前几章的处理对象都是 HTML 的文字，没有涉及图形的制作。要绘图，首要需要的是一块绘图的“画布”。HTML 5 提供两种强有力的“画布”：SVG 和 Canvas。
本章介绍在 D3 中选择、插入、删除元素的方法。如何选择元素上一章已经讲解了 select 和 selectAll，以及选择集的概念。本节具体讲解这两个函数的用法。假设在 body 中有三个段落元素：<p>Apple</p><p>Pear</p><p>Banana</p>现在，要分别完成以下四种选择元素的任务。
选择元素和绑定数据是 D3 最基础的内容，本文将对其进行一个简单的介绍。如何选择元素在 D3 中，用于选择元素的函数有两个：d3.select()：是选择所有指定元素的第一个d3.selectAll()：是选择指定元素的全部这两个函数返回的结果称为选择集。例如，选择集的常见用法如下。var body = d3.select("body"); //选择文档中的body元素var p1 = body.select("p");
先尝试用 D3 写第一个 HelloWorld 程序。学编程入门的第一个程序都是在屏幕上输出 HelloWorld，本课稍微有些不同，不是单纯的输出。HTML 是怎么输出 HelloWorld 的都知道 HTML 吧，如果不知道请下百度一下吧。在 HTML 中输出 HelloWorld 是怎样的呢，先看下面的代码。<html> <head> <meta charset="utf-8"> <title>
近年来，可视化越来越流行，许多报刊杂志、门户网站、新闻、媒体都大量使用可视化技术，使得复杂的数据和文字变得十分容易理解，有一句谚语“一张图片价值于一千个字”，的确是名副其实。各种数据可视化工具也如井喷式地发展，D3 正是其中的佼佼者。D3 是什么D3 的全称是（Data-Driven Documents），顾名思义可以知道是一个被数据驱动的文档。
吕之华喜欢阅读古籍，看古装剧，热爱传统文化。喜欢旅游、登山、远足。生活中有两样不可少：咖啡和葡萄酒。2014 年与好友创办 OUR D3.JS 数据可视化专题站，以 D3.js 为题发表一系列教学文章，获得读者好评。本教程即以专题站的文章为基础，整理简化而成。目前 OUR D3.JS 已经停止更新，新的内容在十二月咖啡馆工作室延续。内容撰写https://github.
关注时代Java
