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

Harpsichord1207 發布于2019-08-21 13:38 / 505人閱讀

摘要：我的目標是，注釋個的例子。可能是史上最詳細的。這次用了畫出一條線。和的值都來自于每一個。這個在上次已經看過了，不同的是在設置軸的定義域的時候，也使用了最大值和最小值的方式。總體來說，和差別不大。省了不少事參考

我的目標是，注釋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

GPU云服務器云服務器刪除注釋條件注釋文件注釋文字注釋

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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