資訊專欄INFORMATION COLUMN
摘要：我的目標(biāo)是，注釋個(gè)的例子。這兩句都是和相關(guān)的，所以放在一起講。區(qū)域的意思是，對(duì)于一個(gè)，和之間的部分表示此覆蓋的區(qū)域。是一個(gè)數(shù)組的輔助函數(shù)，可以返回其最小值和最大值。的映射是，，最大值，也就是的最低和最高。
我的目標(biāo)是，注釋100個(gè)d3.js的例子。
可能是史上最詳細(xì)的 。
Area Chart
是Basic Charts
里的第一個(gè)例子。
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作為整個(gè)圖表（包括空白部分）的寬和高，除去空白部分，算出圖表真實(shí)的大小。這也就是x軸(width)和y軸(height)的長度。
var parseDate = d3.time.format("%d-%b-%y").parse;
使用了d3.time的Time Formatting。它用來在時(shí)間對(duì)象和字符串之間相互轉(zhuǎn)換。
%d-%b-%y叫做specifier，表示的是“24-Mar-08”這種時(shí)間樣式。parse是一個(gè)函數(shù)，賦值給parseDate變量，方便以后的調(diào)用。
整行代碼的意思就是，把的一個(gè)函數(shù)賦給了parseDate，這個(gè)函數(shù)可以把長得像“24-Mar-08”的字符串轉(zhuǎn)換成時(shí)間對(duì)象。
var x = d3.time.scale()
.range([0, width]);
var y = d3.scale.linear()
.range([height, 0]);
這兩句都是和d3.scale相關(guān)的，所以放在一起講。先提出一個(gè)問題來解釋一下scale是做什么的。
如何從 0-100 映射到 0-1 ？ 答案自然就是
0 -> 0
1 -> 0.01
2 -> 0.02
...
以此類推。那從 100-0 映射到 0-1 呢？ 從 1-12 到 1月到12月 呢？ 或者從 0 - 1 判斷 男女呢？ scale就是做這個(gè)用的，它主要有三類：
數(shù)字 （0-1）
文字 （男女）
時(shí)間 （月份）
而剛剛的例子中，0-100 叫做domain，可以理解為輸入的值域。0-1 叫做range，就是輸出的值域。
x這個(gè)scale就是時(shí)間，它輸出的值域會(huì)在0到width之間。y這個(gè)scale就是數(shù)字，它輸出的值域會(huì)在height到0之間。注意，這里并沒有設(shè)置domain，也就是輸入的值域。因?yàn)椋斎胫涤虍?dāng)然要等到讀取數(shù)據(jù)之后才會(huì)明了。
所以，從這里看出，x和y的輸出值域與width和height有密切的關(guān)系。理所當(dāng)然的，它們之后一定會(huì)被用作構(gòu)圖。
4var 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，同時(shí)指定了它的朝向是向下。意思是，水平的橫軸，文字在軸的下面。以此類推，yAxis使用了scale y，垂直的縱軸，文字在軸的左邊。
var area = d3.svg.area()
.x(function(d) { return x(d.date); })
.y0(height)
.y1(function(d) { return y(d.close); });
建立了一個(gè)svg的area。區(qū)域 (area) 的意思是，對(duì)于一個(gè)x，y0和y1之間的部分表示此x覆蓋的區(qū)域。
x和y1都接受了一個(gè)函數(shù)，函數(shù)的形參是d。當(dāng)渲染的時(shí)候，d3.js會(huì)把每一條數(shù)據(jù)都一一傳進(jìn)來。
為什么y0是height,而y1是d.close?
對(duì)于某個(gè)的x，y0表示覆蓋區(qū)域垂直方向的起始點(diǎn)，y1表示終止點(diǎn)。從d3.js的角度來說，左上角為(0, 0)，對(duì)這個(gè)點(diǎn)將會(huì)繪制(x, y0=height)到(x, y1=d.close)，也就是從圖表的最底部往上畫，畫到d.close。
6var 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，在其末尾加上一個(gè)svg，并且指定了svg的高度的寬度。最后在svg里加入一個(gè)g(group)，并且留出margin的距離。
7d3.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ù)，會(huì)執(zhí)行這個(gè)function(error, data)這個(gè)callback。而數(shù)據(jù)會(huì)以數(shù)組的形式存放在形參data里面.
8data.forEach(function(d) {
d.date = parseDate(d.date);
d.close = +d.close;
});
既然data是數(shù)組，那我們就對(duì)它的每一個(gè)元素進(jìn)行處理。
對(duì)date使用之前保存下來的parseDate函數(shù)，記不記得，它能夠處理類似24-Mar-08的字符串。
而close僅僅是從字符串換成數(shù)字。
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(輸出值域)。現(xiàn)在讀完數(shù)據(jù)了，需要設(shè)置domain(輸入的值域)。
d3.extent是一個(gè)數(shù)組的輔助函數(shù)，可以返回其最小值和最大值。
完成以后，x scale的映射是，[時(shí)間最小值，時(shí)間最大值] -> [0, width]，也就是xAxis的最左和最右。
y scale的映射是，[0，最大值] -> [height, 0]，也就是yAxis的最低和最高。
最后幾行比較無趣，一起說吧。
svg.append("path")
.datum(data)
.attr("class", "area")
.attr("d", area);
用處理好的數(shù)據(jù)建立area。唯一要說一說的是這個(gè)datum，它一般用于靜態(tài)的數(shù)據(jù)可視化。也就是說，如果這個(gè)元素不需要隨著數(shù)據(jù)的變化而變化，那么用datum是合適的。更加具體的解釋，或者是動(dòng)態(tài)更新數(shù)據(jù)可視化的方法，參見這里。
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
建立x軸的g ——— g是group的意思。除了建立的時(shí)候用了之前的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，同時(shí)加一個(gè)文字，轉(zhuǎn)90度，設(shè)定初始位置和偏移量，同時(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)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/79026.html
摘要：我的目標(biāo)是，注釋個(gè)的例子?？赡苁鞘飞献钤敿?xì)的。這次用了畫出一條線。和的值都來自于每一個(gè)。這個(gè)在上次已經(jīng)看過了，不同的是在設(shè)置軸的定義域的時(shí)候，也使用了最大值和最小值的方式?？傮w來說，和差別不大。省了不少事參考 我的目標(biāo)是，注釋100個(gè)d3.js的例子。 可能是史上最詳細(xì)的 。 LineChart是Basic Charts里的第二個(gè)例子。 解析 1 前面幾行，可以參考一下前面的第一...
摘要：它有什么圖表加粗文字如何使用這個(gè)圖表庫可以通過存儲(chǔ)庫下載或通過包管理器安裝。數(shù)據(jù)可以直接從文件加載到圖表中。它有什么圖表如何使用該庫可在包管理器和他們自己的內(nèi)容傳送網(wǎng)絡(luò)中使用。該庫專為風(fēng)格的數(shù)據(jù)可視化而設(shè)計(jì)，提供一系列高度可配置的圖表。 現(xiàn)在有很多圖表庫，但哪一個(gè)最好用？這可能取決于許多因素，如業(yè)務(wù)需求，數(shù)據(jù)類型，圖表本身的目的等等。在本文中，每個(gè)JavaScript圖表庫將與一些關(guān)鍵...
摘要：它有什么圖表加粗文字如何使用這個(gè)圖表庫可以通過存儲(chǔ)庫下載或通過包管理器安裝。數(shù)據(jù)可以直接從文件加載到圖表中。它有什么圖表如何使用該庫可在包管理器和他們自己的內(nèi)容傳送網(wǎng)絡(luò)中使用。該庫專為風(fēng)格的數(shù)據(jù)可視化而設(shè)計(jì)，提供一系列高度可配置的圖表。 現(xiàn)在有很多圖表庫，但哪一個(gè)最好用？這可能取決于許多因素，如業(yè)務(wù)需求，數(shù)據(jù)類型，圖表本身的目的等等。在本文中，每個(gè)JavaScript圖表庫將與一些關(guān)鍵...
摘要：它有什么圖表加粗文字如何使用這個(gè)圖表庫可以通過存儲(chǔ)庫下載或通過包管理器安裝。數(shù)據(jù)可以直接從文件加載到圖表中。它有什么圖表如何使用該庫可在包管理器和他們自己的內(nèi)容傳送網(wǎng)絡(luò)中使用。該庫專為風(fēng)格的數(shù)據(jù)可視化而設(shè)計(jì)，提供一系列高度可配置的圖表。 現(xiàn)在有很多圖表庫，但哪一個(gè)最好用？這可能取決于許多因素，如業(yè)務(wù)需求，數(shù)據(jù)類型，圖表本身的目的等等。在本文中，每個(gè)JavaScript圖表庫將與一些關(guān)鍵...
摘要：新公司已經(jīng)呆了一個(gè)多月，目前著手一個(gè)數(shù)據(jù)可視化的項(xiàng)目，數(shù)據(jù)可視化肯定要用到圖形庫如等，經(jīng)決定我的這個(gè)項(xiàng)目用阿里旗下螞蟻金服所開發(fā)的圖表庫。數(shù)據(jù)提示框內(nèi)提示的信息還可以通過格式化函數(shù)動(dòng)態(tài)指定。 新公司已經(jīng)呆了一個(gè)多月，目前著手一個(gè)數(shù)據(jù)可視化的項(xiàng)目，數(shù)據(jù)可視化肯定要用到圖形庫如D3、Highcharts、ECharts、Chart等，經(jīng)決定我的這個(gè)項(xiàng)目用阿里旗下螞蟻金服所開發(fā)的G2圖表庫。...
閱讀 3453·2019-08-30 15:44
閱讀 798·2019-08-30 13:46
閱讀 2058·2019-08-30 11:05
閱讀 3332·2019-08-29 18:32
閱讀 2155·2019-08-29 13:56
閱讀 1296·2019-08-29 12:57
閱讀 757·2019-08-28 18:21
閱讀 1734·2019-08-26 12:16
