国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

Java3y / 2562人閱讀

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

我的目標是，注釋100個d3.js的例子。


可能是史上最詳細的 。

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。它用來在時間對象和字符串之間相互轉換。
%d-%b-%y叫做specifier，表示的是“24-Mar-08”這種時間樣式。parse是一個函數，賦值給parseDate變量，方便以后的調用。
整行代碼的意思就是，把的一個函數賦給了parseDate，這個函數可以把長得像“24-Mar-08”的字符串轉換成時間對象。

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

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

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

0 -> 0

1 -> 0.01

2 -> 0.02
...

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

數字 （0-1）

文字 （男女）

時間 （月份）

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

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

所以，從這里看出，x和y的輸出值域與width和height有密切的關系。理所當然的，它們之后一定會被用作構圖。

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

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

這兩句看字面意義就可以了。它們和d3.svg.axis相關，是在建立坐標軸。
xAxis使用了上一段創建的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。區域 (area) 的意思是，對于一個x，y0和y1之間的部分表示此x覆蓋的區域。

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

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

對于某個的x，y0表示覆蓋區域垂直方向的起始點，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;

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

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

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

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只設定了與畫圖面積相關的range(輸出值域)。現在讀完數據了，需要設置domain(輸入的值域)。
d3.extent是一個數組的輔助函數，可以返回其最小值和最大值。

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

10

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

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

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

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，同時加一個文字，轉90度，設定初始位置和偏移量，同時改變字體本身錨的位置（一般都以左上角為錨）。

參考:

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

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

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/79026.html

相關文章

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

    摘要：我的目標是，注釋個的例子。可能是史上最詳細的。這次用了畫出一條線。和的值都來自于每一個。這個在上次已經看過了，不同的是在設置軸的定義域的時候，也使用了最大值和最小值的方式。總體來說，和差別不大。省了不少事參考 我的目標是，注釋100個d3.js的例子。 可能是史上最詳細的 。 LineChart是Basic Charts里的第二個例子。 解析 1 前面幾行，可以參考一下前面的第一...

    Harpsichord1207 評論0 收藏0

  • 2018年最佳JavaScript數據可視化和圖表庫

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

    terasum 評論0 收藏0

  • 2018年最佳JavaScript數據可視化和圖表庫

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

    dreambei 評論0 收藏0

  • 2018年最佳JavaScript數據可視化和圖表庫

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

    archieyang 評論0 收藏0

  • 螞蟻金服新一代數據可視化引擎 G2

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

    animabear 評論0 收藏0

發表評論

0條評論

Java3y

男|高級講師

TA的文章

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