注释！注释！(2) - Line Chart

我的目标是，注释100个d3.js的例子。

可能是史上最详细的 。

LineChart
是Basic Charts
里的第二个例子。

解析

---

1

前面几行，可以参考一下前面的第一个例子: Area Chart

---

2

var line = d3.svg.line()
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y(d.close); });

这段是相对于第一个例子里的创立的:

var area = d3.svg.area()
        .x(function (d) {
            return x(d.date);
        })
        .y0(height)
        .y1(function (d) {
            return y(d.close);
        });

从这两个例子看出，svg是非常重要的api，它用来绘制图片中核心的部分：数据可视化后的形式。这次用了d3.svg.line画出一条线。x和y的值都来自于每一个data point。

---

3

d3.tsv("data.tsv", type, function(error, data) {...};

function type(d) {
    d.date = formatDate.parse(d.date);
    d.close = +d.close;
    return d;
}

这里和Area Chart用法的不同点在于：

d3.tsv("data.tsv", function (error, data) {...}

多了一个type作为第二个参数，会在处理每一个行(row)的时候被调用。

---

4

x.domain(d3.extent(data, function (d) {
    return d.date;
}));

y.domain(d3.extent(data, function (d) {
    return d.close;
}));

这个在上次已经看过了，不同的是在设置y轴的定义域的时候，也使用了d3.extent（最大值和最小值）的方式。

---

总体来说，Line Chart和Area Chart差别不大。省了不少事 =)

---

参考:

1 https://github.com/mbostock/d3/wiki/Gallery#basic-charts
2 http://bl.ocks.org/mbostock/3883245