我的目的是，解释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