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

Harpsichord1207 发布于2019-08-21 13:38 / 400人阅读

摘要：我的目标是，注释个的例子。可能是史上最详细的。这次用了画出一条线。和的值都来自于每一个。这个在上次已经看过了，不同的是在设置轴的定义域的时候，也使用了最大值和最小值的方式。总体来说，和差别不大。省了不少事参考

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

可能是史上最详细的。

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

解析 1

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

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。

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)的时候被调用。

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

专线服务私有云删除注释条件注释文件注释文字注释

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/87734.html

2018年最佳JavaScript数据可视化和图表库

摘要：它有什么图表加粗文字如何使用这个图表库可以通过存储库下载或通过包管理器安装。数据可以直接从文件加载到图表中。它有什么图表如何使用该库可在包管理器和他们自己的内容传送网络中使用。该库专为风格的数据可视化而设计，提供一系列高度可配置的图表。现在有很多图表库，但哪一个最好用？这可能取决于许多因素，如业务需求，数据类型，图表本身的目的等等。在本文中，每个JavaScript图表库将与一些关键...

terasum 2019-08-02 11:51 评论0 收藏0
2018年最佳JavaScript数据可视化和图表库

摘要：它有什么图表加粗文字如何使用这个图表库可以通过存储库下载或通过包管理器安装。数据可以直接从文件加载到图表中。它有什么图表如何使用该库可在包管理器和他们自己的内容传送网络中使用。该库专为风格的数据可视化而设计，提供一系列高度可配置的图表。现在有很多图表库，但哪一个最好用？这可能取决于许多因素，如业务需求，数据类型，图表本身的目的等等。在本文中，每个JavaScript图表库将与一些关键...

dreambei 2019-08-29 17:08 评论0 收藏0
2018年最佳JavaScript数据可视化和图表库

摘要：它有什么图表加粗文字如何使用这个图表库可以通过存储库下载或通过包管理器安装。数据可以直接从文件加载到图表中。它有什么图表如何使用该库可在包管理器和他们自己的内容传送网络中使用。该库专为风格的数据可视化而设计，提供一系列高度可配置的图表。现在有很多图表库，但哪一个最好用？这可能取决于许多因素，如业务需求，数据类型，图表本身的目的等等。在本文中，每个JavaScript图表库将与一些关键...

archieyang 2019-08-23 12:36 评论0 收藏0
蚂蚁金服新一代数据可视化引擎 G2

摘要：新公司已经呆了一个多月，目前着手一个数据可视化的项目，数据可视化肯定要用到图形库如等，经决定我的这个项目用阿里旗下蚂蚁金服所开发的图表库。数据提示框内提示的信息还可以通过格式化函数动态指定。新公司已经呆了一个多月，目前着手一个数据可视化的项目，数据可视化肯定要用到图形库如D3、Highcharts、ECharts、Chart等，经决定我的这个项目用阿里旗下蚂蚁金服所开发的G2图表库。...

animabear 2019-08-20 16:32 评论0 收藏0
注释！注释！(1) - Area Chart

摘要：我的目标是，注释个的例子。这两句都是和相关的，所以放在一起讲。区域的意思是，对于一个，和之间的部分表示此覆盖的区域。是一个数组的辅助函数，可以返回其最小值和最大值。的映射是，，最大值，也就是的最低和最高。我的目标是，注释100个d3.js的例子。可能是史上最详细的。 Area Chart是Basic Charts里的第一个例子。解析 1 var margin = {top...

Java3y 2019-08-19 17:57 评论0 收藏0