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

Harpsichord1207 發(fā)布于2019-08-21 13:38 / 551人閱讀

摘要：我的目標(biāo)是，注釋個(gè)的例子?？赡苁鞘飞献钤敿?xì)的。這次用了畫(huà)出一條線。和的值都來(lái)自于每一個(gè)。這個(gè)在上次已經(jīng)看過(guò)了，不同的是在設(shè)置軸的定義域的時(shí)候，也使用了最大值和最小值的方式。總體來(lái)說(shuō)，和差別不大。省了不少事參考

我的目標(biāo)是，注釋100個(gè)d3.js的例子。
可能是史上最詳細(xì)的 。

LineChart
是Basic Charts
里的第二個(gè)例子。

解析 1

前面幾行，可以參考一下前面的第一個(gè)例子: Area Chart

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

這段是相對(duì)于第一個(gè)例子里的創(chuàng)立的:

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

從這兩個(gè)例子看出，svg是非常重要的api，它用來(lái)繪制圖片中核心的部分：數(shù)據(jù)可視化后的形式。這次用了d3.svg.line畫(huà)出一條線。x和y的值都來(lái)自于每一個(gè)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用法的不同點(diǎn)在于：

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

多了一個(gè)type作為第二個(gè)參數(shù)，會(huì)在處理每一個(gè)行(row)的時(shí)候被調(diào)用。

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

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

這個(gè)在上次已經(jīng)看過(guò)了，不同的是在設(shè)置y軸的定義域的時(shí)候，也使用了d3.extent（最大值和最小值）的方式。

總體來(lái)說(shuō)，Line Chart和Area Chart差別不大。省了不少事 =)

參考:

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

GPU云服務(wù)器云服務(wù)器刪除注釋條件注釋文件注釋文字注釋

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/87734.html

相關(guān)文章

2018年最佳JavaScript數(shù)據(jù)可視化和圖表庫(kù)

摘要：它有什么圖表加粗文字如何使用這個(gè)圖表庫(kù)可以通過(guò)存儲(chǔ)庫(kù)下載或通過(guò)包管理器安裝。數(shù)據(jù)可以直接從文件加載到圖表中。它有什么圖表如何使用該庫(kù)可在包管理器和他們自己的內(nèi)容傳送網(wǎng)絡(luò)中使用。該庫(kù)專為風(fēng)格的數(shù)據(jù)可視化而設(shè)計(jì)，提供一系列高度可配置的圖表。現(xiàn)在有很多圖表庫(kù)，但哪一個(gè)最好用？這可能取決于許多因素，如業(yè)務(wù)需求，數(shù)據(jù)類型，圖表本身的目的等等。在本文中，每個(gè)JavaScript圖表庫(kù)將與一些關(guān)鍵...

terasum 2019-08-02 11:51 評(píng)論0 收藏0
2018年最佳JavaScript數(shù)據(jù)可視化和圖表庫(kù)

摘要：它有什么圖表加粗文字如何使用這個(gè)圖表庫(kù)可以通過(guò)存儲(chǔ)庫(kù)下載或通過(guò)包管理器安裝。數(shù)據(jù)可以直接從文件加載到圖表中。它有什么圖表如何使用該庫(kù)可在包管理器和他們自己的內(nèi)容傳送網(wǎng)絡(luò)中使用。該庫(kù)專為風(fēng)格的數(shù)據(jù)可視化而設(shè)計(jì)，提供一系列高度可配置的圖表。現(xiàn)在有很多圖表庫(kù)，但哪一個(gè)最好用？這可能取決于許多因素，如業(yè)務(wù)需求，數(shù)據(jù)類型，圖表本身的目的等等。在本文中，每個(gè)JavaScript圖表庫(kù)將與一些關(guān)鍵...

dreambei 2019-08-29 17:08 評(píng)論0 收藏0
2018年最佳JavaScript數(shù)據(jù)可視化和圖表庫(kù)

摘要：它有什么圖表加粗文字如何使用這個(gè)圖表庫(kù)可以通過(guò)存儲(chǔ)庫(kù)下載或通過(guò)包管理器安裝。數(shù)據(jù)可以直接從文件加載到圖表中。它有什么圖表如何使用該庫(kù)可在包管理器和他們自己的內(nèi)容傳送網(wǎng)絡(luò)中使用。該庫(kù)專為風(fēng)格的數(shù)據(jù)可視化而設(shè)計(jì)，提供一系列高度可配置的圖表。現(xiàn)在有很多圖表庫(kù)，但哪一個(gè)最好用？這可能取決于許多因素，如業(yè)務(wù)需求，數(shù)據(jù)類型，圖表本身的目的等等。在本文中，每個(gè)JavaScript圖表庫(kù)將與一些關(guān)鍵...

archieyang 2019-08-23 12:36 評(píng)論0 收藏0
螞蟻金服新一代數(shù)據(jù)可視化引擎 G2

摘要：新公司已經(jīng)呆了一個(gè)多月，目前著手一個(gè)數(shù)據(jù)可視化的項(xiàng)目，數(shù)據(jù)可視化肯定要用到圖形庫(kù)如等，經(jīng)決定我的這個(gè)項(xiàng)目用阿里旗下螞蟻金服所開(kāi)發(fā)的圖表庫(kù)。數(shù)據(jù)提示框內(nèi)提示的信息還可以通過(guò)格式化函數(shù)動(dòng)態(tài)指定。新公司已經(jīng)呆了一個(gè)多月，目前著手一個(gè)數(shù)據(jù)可視化的項(xiàng)目，數(shù)據(jù)可視化肯定要用到圖形庫(kù)如D3、Highcharts、ECharts、Chart等，經(jīng)決定我的這個(gè)項(xiàng)目用阿里旗下螞蟻金服所開(kāi)發(fā)的G2圖表庫(kù)。...

animabear 2019-08-20 16:32 評(píng)論0 收藏0
注釋！注釋！(1) - Area Chart

摘要：我的目標(biāo)是，注釋個(gè)的例子。這兩句都是和相關(guān)的，所以放在一起講。區(qū)域的意思是，對(duì)于一個(gè)，和之間的部分表示此覆蓋的區(qū)域。是一個(gè)數(shù)組的輔助函數(shù)，可以返回其最小值和最大值。的映射是，，最大值，也就是的最低和最高。我的目標(biāo)是，注釋100個(gè)d3.js的例子。可能是史上最詳細(xì)的。 Area Chart是Basic Charts里的第一個(gè)例子。解析 1 var margin = {top...

Java3y 2019-08-19 17:57 評(píng)論0 收藏0