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

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

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

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

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); });

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

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

從這兩個例子看出，svg是非常重要的api，它用來繪制圖片中核心的部分：數(shù)據(jù)可視化后的形式。這次用了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作為第二個參數(shù)，會在處理每一個行(row)的時候被調(diào)用。

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

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

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

總體來說，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)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/87734.html

相關(guān)文章

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

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

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

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

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

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

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

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

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

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

Java3y 2019-08-19 17:57 評論0 收藏0