本教程是一个简单的入门教程，能够帮助初学者快速掌握D3的基础知识。
本节内容介绍了添加元素、绑定数据、使用数据、矢量图SVG、比例尺Scale和坐标轴Axis。绑定数据介绍了从tsv文件绑定数据，从json文件、csv文件绑定数据用法相同。SVG用来绘制简单图形，是重点又是基础。Scale可以来控制缩放比例，Axis可以绘制坐标轴。
参考教程：D3 Tutorials - Scott Murray
1. 添加元素
d3.select("body").append("p").text("New paragraph!")
在html中添加了一个p标签，p标签text值为“New paragraph!”。
2. 绑定数据
2.1 Array
var dataset = [5, 10, 15, 20, 25];
d3.select("body")
.selectAll("p")
.data(dataset)
.enter()
.append("p")
.text("New paragraph!");
d3.select("body")——在DOM中找到body节点。
.selctAll("p")——在上一步找到的body节点中选择所有的p标签节点。如果没有，返回空，但是这个空代表将要存在的段落。
.data(dataset)——绑定数据到选择的DOM元素上。
.enter()——enter()将创建一个占位符元素，用来绑定数据。
.append("p")——获取enter()创建的占位符，将p元素插入到DOM中。
.text("New paragraph!")——为每个p元素插入文本值。
html中添加了5个p标签，text值均为“New paragraph!”。
2.2 TSV
TSV是一种方便的表格数据格式。该表格可以从Microsoft Excel等表格程序导出，也可以在文本编辑器中手工编写。每一行代表一个表行，其中每行的数据由制表符Tab分隔组成。第一行是标题行，并指定列名。例如，我们的数据文件data.tsv内容如下：
name value
Locke 4
Reyes 8
Ford 15
Jarrah 16
Jone 23
Kwon 42
要在浏览器中使用此数据，需要从服务器下载文件，然后解析文件，将文件的文本转换为可用的JavaScript对象。这件事情可以由函数d3.tsv实现。
下载是异步的。当调用d3.tsv时，文件在后台下载然后返回数据。在下载完成后的某个时候，回调函数将使用新数据调用，如果下载失败，则返回错误。
// 1. 这里的代码首先运行，处于文件下载前。
d3.tsv("data.tsv", function(error, data) {
//3. 这里的代码最后运行，此时文件下载完成。
});
// 2. 这里的代码第二时间运行，文件正在下载中。
TSV文件的文本转换为JavaScript对象是这个样子：
var data = [
{name: "Locke", value: 4},
{name: "Reyes", value: 8},
{name: "Ford", value:15},
{name: "Jarrah", value: 16},
{name: "Jone", value: 23},
{name: "Kwon", value: 42}
]
使用d3.json、d3.csv能够分别从json文件、csv文件绑定数据，用法相同。
3. 使用数据
var dataset = [5, 10, 15, 20, 25];
d3.select("body")
.selectAll("p")
.data(dataset)
.enter()
.append("p")
.text(function(d) { return d; });
创建了5个p标签，text值分别为5，10，15，20，25。
4. 绘制div
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
div.bar {
display: inline-block;
width: 20px;
height: 75px; /* We'll override this later */
background-color: teal;
margin-right: 2px;
}
</style>
</head>
<body>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script type="text/javascript">
var dataset = []; //Initialize empty array
for (var i = 0; i < 25; i++) { //Loop 25 times
var newNumber = Math.random() * 30; //New random number (0-30)
dataset.push(newNumber); //Add new number to array
}
d3.select("body").selectAll("div")
.data(dataset)
.enter()
.append("div")
.attr("class", "bar")
.style("height", function(d) {
var barHeight = d * 5;
return barHeight + "px";
});
</script>
</body>
<html>
5. SVG
在绘制任何东西之前，必须先创建一个SVG元素，并将该SVG元素作为绘制视觉效果的画布。最好指定SVG的宽度和高度。
<svg width="500" height="50"></svg>
常用的svg标签有rect、circle、ellipse、line、text、path。
5.1 rect
rect绘制一个矩形。使用x和y指定左上角的坐标，width和height分别指定矩形的宽度和高度。
<rect x="0" y="0" width="500" height="50" />
效果图：
5.2 circle
circle绘制一个圆。使用cx和cy指定圆心的坐标，r指定半径。
<circle cx="250" cy="25" r="25" />
效果图：
5.3 ellipse
ellipse绘制一个椭圆。与圆类似，使用cx和cy指定中心的坐标，但是对于每个轴需要单独的半径值。rx为横轴方向的半径，ry为纵轴方向的半径。
<ellipse cx="250" cy="25" rx="100" ry="25" />
效果图：
5.4 line
line绘制一条线条。使用x1和y1来指定线一端的坐标，x2和y2指定另一端的坐标。必须指定线条的颜色使线条可见。
<line x1="0" y1="0" x2="500" y2="50" stroke="black" />
效果图：
5.5 text
text呈现文字。使用x指定左边缘的位置，y指定基线的垂直位置。
<text x="250" y="25">Hello World</text>
效果图：
text继承父元素CSS指定的字体样式。我们也可以覆盖格式如下：
<text x="250" y="25" font-family="sans-serif" font-size="25" fill="steelblue">Hello World</text>
效果图：
5.6 path
path用于绘制更为复杂的内容（如地理图的国家轮廓等）。现在，我们先掌握简单的形状。
6. Scale
D3的scale函数可以定义一个缩放比例。调用scale函数时，传入一个数据值，可以返回一个缩放后的输出值。
创建一个Scale:
//d3.js 3.x版本
var scale = d3.scale.linear();
//d3.js 4.x版本
var scale = d3.scaleLinear();
使用domain函数可以设置数据的输入域：
scale.domain([100, 500]);
使用range函数可以设置数据的输出域：
scale.range([10, 350]);
可以将上述步骤链接在一行代码中：
var scale = d3.scale.linear()
.domain([100, 500])
.range([10, 350]);
scale(100); //Returns 10
scale(300); //Returns 180
scale(500); //Returns 350
7. Axis
axis函数用来创建坐标轴。
创建一个Axis:
var xAxis = d3.svg.axis();
每个轴需告知操作的尺度规模大小,即scale：
xAxis.scale(xScale);
我们还需要指定标签刻度值在轴上显示的位置。默认值为bottom，表示标签刻度值显示在轴线的下方。
xAxis.orient("bottom");
可以使用ticks函数告诉坐标轴粗略的设置几个刻度：
xAxis.ticks(5);
我们也可以把代码链接起来：
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom")
.ticks(5);
最后，我们把生成的轴插入到SVG中。
svg.append("g")
.call(xAxis);
更多内容：Github个人博客
备注：本文发表于 https://cnyangkui.github.io/2017/10/16/d3basic.html
