成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

注釋！注釋！(1) - Area Chart

Java3y / 2560人閱讀

摘要：我的目標(biāo)是，注釋個的例子。這兩句都是和相關(guān)的，所以放在一起講。區(qū)域的意思是，對于一個，和之間的部分表示此覆蓋的區(qū)域。是一個數(shù)組的輔助函數(shù)，可以返回其最小值和最大值。的映射是，，最大值，也就是的最低和最高。

我的目標(biāo)是，注釋100個d3.js的例子。


可能是史上最詳細(xì)的 。

Area Chart
是Basic Charts
里的第一個例子。

解析 1 
var margin = {top: 20, right: 20, bottom: 30, left: 50},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

純粹的JavaScript代碼。
首先定義上下左右margin的值。然后以960和500作為整個圖表（包括空白部分）的寬和高，除去空白部分，算出圖表真實的大小。這也就是x軸(width)和y軸(height)的長度。

2 
var parseDate = d3.time.format("%d-%b-%y").parse;

使用了d3.time的Time Formatting。它用來在時間對象和字符串之間相互轉(zhuǎn)換。
%d-%b-%y叫做specifier，表示的是“24-Mar-08”這種時間樣式。parse是一個函數(shù)，賦值給parseDate變量，方便以后的調(diào)用。
整行代碼的意思就是，把的一個函數(shù)賦給了parseDate，這個函數(shù)可以把長得像“24-Mar-08”的字符串轉(zhuǎn)換成時間對象。

3 
var x = d3.time.scale()
    .range([0, width]);
    
var y = d3.scale.linear()
    .range([height, 0]);

這兩句都是和d3.scale相關(guān)的，所以放在一起講。先提出一個問題來解釋一下scale是做什么的。

如何從 0-100 映射到 0-1 ？ 答案自然就是

0 -> 0

1 -> 0.01

2 -> 0.02
...

以此類推。那從 100-0 映射到 0-1 呢？ 從 1-12 到 1月到12月 呢？ 或者從 0 - 1 判斷 男女呢？ scale就是做這個用的，它主要有三類：

數(shù)字 （0-1）

文字 （男女）

時間 （月份）

而剛剛的例子中，0-100 叫做domain，可以理解為輸入的值域。0-1 叫做range，就是輸出的值域。

x這個scale就是時間，它輸出的值域會在0到width之間。y這個scale就是數(shù)字，它輸出的值域會在height到0之間。注意，這里并沒有設(shè)置domain，也就是輸入的值域。因為，輸入值域當(dāng)然要等到讀取數(shù)據(jù)之后才會明了。

所以，從這里看出，x和y的輸出值域與width和height有密切的關(guān)系。理所當(dāng)然的，它們之后一定會被用作構(gòu)圖。

4 
var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom");

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left");

這兩句看字面意義就可以了。它們和d3.svg.axis相關(guān)，是在建立坐標(biāo)軸。
xAxis使用了上一段創(chuàng)建的scale x，同時指定了它的朝向是向下。意思是，水平的橫軸，文字在軸的下面。以此類推，yAxis使用了scale y，垂直的縱軸，文字在軸的左邊。

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

建立了一個svg的area。區(qū)域 (area) 的意思是，對于一個x，y0和y1之間的部分表示此x覆蓋的區(qū)域。

x和y1都接受了一個函數(shù)，函數(shù)的形參是d。當(dāng)渲染的時候，d3.js會把每一條數(shù)據(jù)都一一傳進來。

為什么y0是height,而y1是d.close?

對于某個的x，y0表示覆蓋區(qū)域垂直方向的起始點，y1表示終止點。從d3.js的角度來說，左上角為(0, 0)，對這個點將會繪制(x, y0=height)到(x, y1=d.close)，也就是從圖表的最底部往上畫，畫到d.close。

6 
var svg = d3.select("body").append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
        .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

這部分比較簡單，找到html里的body，在其末尾加上一個svg，并且指定了svg的高度的寬度。最后在svg里加入一個g(group)，并且留出margin的距離。

7 
d3.tsv("data.tsv", function (error, data) {
    if (error) throw error;

讀取數(shù)據(jù)的函數(shù)，數(shù)據(jù)源是tsv(tab separated values)。當(dāng)d3.js讀取并且處理完數(shù)據(jù)，會執(zhí)行這個function(error, data)這個callback。而數(shù)據(jù)會以數(shù)組的形式存放在形參data里面.

8 
data.forEach(function(d) {
    d.date = parseDate(d.date);
    d.close = +d.close;
  });

既然data是數(shù)組，那我們就對它的每一個元素進行處理。
對date使用之前保存下來的parseDate函數(shù)，記不記得，它能夠處理類似24-Mar-08的字符串。
而close僅僅是從字符串換成數(shù)字。

9 
x.domain(d3.extent(data, function(d) { return d.date; }));
y.domain([0, d3.max(data, function(d) { return d.close; })]);

回憶一下，剛剛的x和y作為scale只設(shè)定了與畫圖面積相關(guān)的range(輸出值域)?，F(xiàn)在讀完數(shù)據(jù)了，需要設(shè)置domain(輸入的值域)。
d3.extent是一個數(shù)組的輔助函數(shù)，可以返回其最小值和最大值。

完成以后，x scale的映射是，[時間最小值，時間最大值] -> [0, width]，也就是xAxis的最左和最右。
y scale的映射是，[0，最大值] -> [height, 0]，也就是yAxis的最低和最高。

10

最后幾行比較無趣，一起說吧。

svg.append("path")
      .datum(data)
      .attr("class", "area")
      .attr("d", area);

用處理好的數(shù)據(jù)建立area。唯一要說一說的是這個datum，它一般用于靜態(tài)的數(shù)據(jù)可視化。也就是說，如果這個元素不需要隨著數(shù)據(jù)的變化而變化，那么用datum是合適的。更加具體的解釋，或者是動態(tài)更新數(shù)據(jù)可視化的方法，參見這里。

svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis);

建立x軸的g ——— g是group的意思。除了建立的時候用了之前的xAxis，其他幾行無非是加一些css class，然后下移到(0, height)位置，也就是圖表的下方。

svg.append("g")
      .attr("class", "y axis")
      .call(yAxis)
    .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .text("Price ($)");

建立y軸的group，同時加一個文字，轉(zhuǎn)90度，設(shè)定初始位置和偏移量，同時改變字體本身錨的位置（一般都以左上角為錨）。

參考:

1 https://github.com/mbostock/d3/wiki/Gallery#basic-charts
2 http://bl.ocks.org/mbostock/3883195
3 https://gist.github.com/hugolpz/824446bb2f9bc8cce607

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

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

相關(guān)文章

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

    摘要：我的目標(biāo)是，注釋個的例子?？赡苁鞘飞献钤敿?xì)的。這次用了畫出一條線。和的值都來自于每一個。這個在上次已經(jīng)看過了，不同的是在設(shè)置軸的定義域的時候，也使用了最大值和最小值的方式?？傮w來說，和差別不大。省了不少事參考 我的目標(biāo)是，注釋100個d3.js的例子。 可能是史上最詳細(xì)的 。 LineChart是Basic Charts里的第二個例子。 解析 1 前面幾行，可以參考一下前面的第一...

    Harpsichord1207 評論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)鍵...

    terasum 評論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 評論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 評論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 評論0 收藏0

發(fā)表評論

0條評論

Java3y

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<