精通D3.js（交互式數(shù)據(jù)可視化高級(jí)編程）

精通D3.js（交互式數(shù)據(jù)可視化高級(jí)編程）目錄\h第1章D3簡(jiǎn)介\h1.1D3是什么\h1.1.1D3簡(jiǎn)史\h1.1.2D3的優(yōu)勢(shì)\h1.1.3D3的適用范圍\h1.2數(shù)據(jù)可視化是什么\h1.2.1目的\h1.2.2構(gòu)成要素\h1.2.3相關(guān)概念\h1.3圖表種類(lèi)\h1.4學(xué)習(xí)方法\h第2章Web前端開(kāi)發(fā)基礎(chǔ)\h2.1瀏覽器和服務(wù)器\h2.1.1瀏覽器\h2.1.2服務(wù)器\h2.2HTML&CSS\h2.2.1HTML元素\h2.2.2CSS選擇器\h2.2.3綜合運(yùn)用\h2.3JavaScript\h2.3.1在HTML中使用JavaScript\h2.3.2語(yǔ)法\h2.3.3變量\h2.3.4數(shù)據(jù)類(lèi)型\h2.3.5操作符\h2.3.6語(yǔ)句\h2.3.7函數(shù)\h2.3.8對(duì)象\h2.3.9數(shù)組\h2.4DOM\h2.4.1結(jié)構(gòu)\h2.4.2訪(fǎng)問(wèn)和修改HTML元素\h2.4.3添加和刪除節(jié)點(diǎn)\h2.4.4事件\h2.5SVG\h2.5.1位圖和矢量圖\h2.5.2圖形元素\h2.5.3文字\h2.5.4樣式\h2.5.5標(biāo)記\h2.5.6濾鏡\h2.5.7漸變\h第3章安裝和使用\h3.1安裝\h3.1.1下載文件\h3.1.2網(wǎng)絡(luò)引用\h3.2搭建服務(wù)器\h3.3Hello,World\h3.4繪制矢量圖\h3.5調(diào)試\h第4章選擇集與數(shù)據(jù)\h4.1選擇元素\h4.2選擇集\h4.2.1查看狀態(tài)\h4.2.2設(shè)定和獲取屬性\h4.3添加、插入和刪除\h4.4數(shù)據(jù)綁定\h4.4.1datum()的工作過(guò)程\h4.4.2data()的工作過(guò)程\h4.4.3綁定的順序\h4.5選擇集的處理\h4.5.1enter的處理方法\h4.5.2exit的處理方法\h4.5.3處理模板\h4.5.4過(guò)濾器\h4.5.5選擇集的順序\h4.5.6each()的應(yīng)用\h4.5.7call()的應(yīng)用\h4.6數(shù)組的處理\h4.6.1排序\h4.6.2求值\h4.6.3操作數(shù)組\h4.6.4映射（Map）\h4.6.5集合（Set）\h4.6.6嵌套結(jié)構(gòu)（Nest）\h4.7柱形圖的制作\h4.7.1矩形和文字\h4.7.2更新數(shù)據(jù)\h第5章比例尺和坐標(biāo)軸\h5.1定量比例尺\(yùn)h5.1.1線(xiàn)性比例尺\(yùn)h5.1.2指數(shù)和對(duì)數(shù)比例尺\(yùn)h5.1.3量子和分位比例尺\(yùn)h5.1.4閾值比例尺\(yùn)h5.2序數(shù)比例尺\(yùn)h5.3坐標(biāo)軸\h5.3.1繪制方法\h5.3.2刻度\h5.3.3各比例尺的坐標(biāo)軸\h5.4柱形圖的坐標(biāo)軸\h5.5散點(diǎn)圖的制作\h第6章繪制\h6.1顏色\h6.1.1RGB\h6.1.2HSL\h6.1.3插值\h6.2線(xiàn)段生成器\h6.3區(qū)域生成器\h6.4弧生成器\h6.5符號(hào)生成器\h6.6弦生成器\h6.7對(duì)角線(xiàn)生成器\h6.8折線(xiàn)圖的制作\h第7章動(dòng)畫(huà)\h7.1過(guò)渡效果\h7.1.1過(guò)渡的啟動(dòng)\h7.1.2過(guò)渡的屬性\h7.1.3子元素\h7.1.4each()和call()\h7.1.5過(guò)渡樣式\h7.2定時(shí)器\h7.2.1setInterval和setTimeout\h7.2.2d3.timer\h7.3應(yīng)用過(guò)渡的場(chǎng)合\h7.4簡(jiǎn)單的動(dòng)畫(huà)制作\h7.4.1時(shí)鐘\h7.4.2小球運(yùn)動(dòng)\h第8章交互\h8.1交互式入門(mén)\h8.1.1鼠標(biāo)\h8.1.2鍵盤(pán)\h8.1.3觸屏\h8.2事件\h8.3行為\h8.3.1拖曳\h8.3.2縮放\h第9章導(dǎo)入和導(dǎo)出\h9.1文件導(dǎo)入\h9.1.1JSON\h9.1.2CSV\h9.1.3XML\h9.1.4TEXT\h9.2文件導(dǎo)出\h9.2.1導(dǎo)出為SVG文件\h9.2.2編輯矢量圖\h第10章布局\h10.1布局是什么\h10.2餅狀圖\h10.3力導(dǎo)向圖\h10.4弦圖\h10.5樹(shù)狀圖\h10.6集群圖\h10.7捆圖\h10.8打包圖\h10.9直方圖\h10.10分區(qū)圖\h10.11堆棧圖\h10.12矩陣樹(shù)圖\h第11章地圖\h11.1地圖的數(shù)據(jù)\h11.1.1獲取數(shù)據(jù)\h11.1.2簡(jiǎn)化數(shù)據(jù)\h11.1.3GeoJSON\h11.1.4TopoJSON\h11.2中國(guó)地圖\h11.2.1基于GeoJSON\h11.2.2基于TopoJSON\h11.3地理路徑\h11.3.1地理路徑生成器\h11.3.2形狀生成器\h11.4投影\h11.5球面數(shù)學(xué)\h第12章友好的交互\h12.1提示框\h12.1.1餅狀圖的提示框\h12.1.2提示框的樣式\h12.2坐標(biāo)系中的焦點(diǎn)\h12.2.1折線(xiàn)圖的焦點(diǎn)\h12.2.2為折線(xiàn)圖添加提示框\h12.3元素組合\h12.3.1餅狀圖的拖曳\h12.3.2移入和移出\h12.3.3合并\h12.4區(qū)域選擇\h12.4.1在SVG畫(huà)板里選擇一塊區(qū)域\h12.4.2散點(diǎn)圖的區(qū)域選擇\h12.5開(kāi)關(guān)\h12.5.1思維導(dǎo)圖的構(gòu)造思路\h12.5.2思維導(dǎo)圖的制作\h第13章地圖進(jìn)階\h13.1值域的顏色\h13.2標(biāo)注\h13.2.1標(biāo)注地點(diǎn)\h13.2.2夜光圖\h13.3標(biāo)線(xiàn)\h13.3.1帶有箭頭的標(biāo)線(xiàn)\h13.3.2球狀地圖的標(biāo)線(xiàn)\h13.4拖動(dòng)和縮放\h13.4.1平面地圖\h13.4.2球面地圖\h13.5力導(dǎo)向地圖\h13.5.1Voronoi圖和Delaunay三角剖分\h13.5.2力導(dǎo)向的中國(guó)地圖\h附錄彩色插圖注：原文檔電子版（非掃描），需要的請(qǐng)下載本文檔后留言謝謝。第1章D3簡(jiǎn)介本章內(nèi)容包括：D3是什么數(shù)據(jù)可視化是什么常見(jiàn)可視化圖表的種類(lèi)學(xué)習(xí)D3的方法筆者第一次接觸到D3，首先是被絢麗多彩的圖表吸引，然后陶醉于這些圖表的可交互特性，而且動(dòng)畫(huà)流暢簡(jiǎn)潔、賞心悅目。近年來(lái)，可視化越來(lái)越流行，許多報(bào)刊雜志、門(mén)戶(hù)網(wǎng)站、新聞媒體都大量使用可視化技術(shù)，使得復(fù)雜的數(shù)據(jù)和文字變得十分容易理解，有一句諺語(yǔ)“一張圖片價(jià)值相當(dāng)于一千個(gè)字”，的確是名副其實(shí)。對(duì)于信息爆炸式增長(zhǎng)的今天，我們沒(méi)有時(shí)間一條一條地閱讀，希望的是一眼就能找到自己想要的信息。圖片不僅容易理解，而且容易記憶，是值得推廣的信息傳達(dá)方式。1.1D3是什么D3的全稱(chēng)是Data-DrivenDocuments，直譯為“數(shù)據(jù)驅(qū)動(dòng)的文檔”。聽(tīng)名字有點(diǎn)抽象，簡(jiǎn)單概括為一句話(huà)：D3是一個(gè)JavaScript的函數(shù)庫(kù)，是用來(lái)做數(shù)據(jù)可視化的。文檔指DOM，即文檔對(duì)象模型（DocumentObjectModel）。D3允許用戶(hù)綁定任意數(shù)據(jù)到DOM，然后根據(jù)數(shù)據(jù)來(lái)操作文檔，創(chuàng)建可交互式的圖表。JavaScript文件的后綴名通常為.js，故D3也常稱(chēng)為D3.js。D3提供了各種簡(jiǎn)單易用的函數(shù)，大大簡(jiǎn)化了JavaScript操作數(shù)據(jù)生成圖表的難度。由于它本質(zhì)上是JavaScript，所以用JavaScript也是可以實(shí)現(xiàn)所有功能的，但D3能大大減輕你的工作量，尤其是在數(shù)據(jù)可視化方面，D3已經(jīng)將生成可視化的復(fù)雜步驟精簡(jiǎn)到了幾個(gè)簡(jiǎn)單的函數(shù)，你只需要輸入幾個(gè)簡(jiǎn)單的數(shù)據(jù)，就能夠轉(zhuǎn)換為各種絢麗的圖形。有過(guò)JavaScript基礎(chǔ)的朋友一定很容易理解它。1.1.1D3簡(jiǎn)史大數(shù)據(jù)時(shí)代蓬勃發(fā)展的今天，每天都有驚人的數(shù)據(jù)產(chǎn)生，怎么提取并顯示有用的信息，變得越來(lái)越重要。在Web瀏覽器中進(jìn)行可視化也成為迫切的需求，有許多項(xiàng)目以此為目標(biāo)。2009年，MikeBostock、JeffHeer、VadimOgievetsky共同開(kāi)發(fā)了Protovis，可以算是D3的前身。2011年，他們停止了Protovis，使用JavaScript開(kāi)發(fā)了一個(gè)新的項(xiàng)目，這就是D3。JavaScript誕生于1995年，經(jīng)過(guò)近20年的發(fā)展，如今已經(jīng)成為Web瀏覽器上事實(shí)上的標(biāo)準(zhǔn)語(yǔ)言，其應(yīng)用范圍擴(kuò)展到服務(wù)器端、移動(dòng)領(lǐng)域等，并且越來(lái)越完善。因此，D3采用JavaScript作為開(kāi)發(fā)語(yǔ)言。2011年2月18日，MikeBostock發(fā)布了v1.0版本。2011年8月25日，v2.0版本發(fā)布，功能大幅增強(qiáng)，應(yīng)用逐漸增多。2012年12月22日，v3.0版本發(fā)布，修復(fù)了大量bug，功能更加穩(wěn)健。筆者寫(xiě)作時(shí)，最新版本為v3.4.13。v3.0版之后差別不大，本書(shū)以v3.x版為標(biāo)準(zhǔn)。1.1.2D3的優(yōu)勢(shì)可視化的庫(kù)有很多，基于JavaScript開(kāi)發(fā)的庫(kù)也有很多，D3有什么優(yōu)勢(shì)呢？1.數(shù)據(jù)能夠與DOM綁定在一起D3能夠?qū)?shù)據(jù)與DOM綁定在一起，使得數(shù)據(jù)與圖形成為一個(gè)整體，即圖形中有數(shù)據(jù)、數(shù)據(jù)中有圖形。那么在生成圖形或更改圖形時(shí)，就可以方便地根據(jù)數(shù)據(jù)進(jìn)行操作。并且，當(dāng)數(shù)據(jù)更改之后，圖形的更新也會(huì)很方便。2.數(shù)據(jù)轉(zhuǎn)換和繪制是獨(dú)立的將數(shù)據(jù)變成圖表，需要不少數(shù)學(xué)算法，一些可視化庫(kù)的做法是：提供一個(gè)函數(shù)drawPie()，輸入數(shù)據(jù)，直接繪制出餅狀圖。D3的做法是：提供一個(gè)函數(shù)computePie()，可將數(shù)據(jù)轉(zhuǎn)換成餅狀圖的數(shù)據(jù)，然后開(kāi)發(fā)者使用自己喜歡的方式來(lái)繪制餅狀圖?？雌饋?lái)，好像D3使問(wèn)題變麻煩了，但是在圖表比較復(fù)雜的時(shí)候，直接繪制的餅狀圖往往達(dá)不到要求，細(xì)微的部分沒(méi)有辦法更改。將兩者分開(kāi)，就極大地提高了自由度，以至于開(kāi)發(fā)者甚至可以使用其他的圖形庫(kù)來(lái)顯示D3計(jì)算的數(shù)據(jù)。3.代碼簡(jiǎn)潔JQuery是網(wǎng)頁(yè)開(kāi)發(fā)中很常用的庫(kù)，其鏈?zhǔn)秸Z(yǔ)法被很多人喜愛(ài)。D3也采用了這一語(yǔ)法，能夠一個(gè)函數(shù)套一個(gè)函數(shù)，使得代碼很簡(jiǎn)潔。4.大量布局餅狀圖、樹(shù)形圖、打包圖、矩陣樹(shù)圖等，D3將大量復(fù)雜的算法封裝成一個(gè)一個(gè)“布局”，能夠適用于各種圖表的制作。5.基于SVG，縮放不會(huì)損失精度SVG，是可縮放的矢量圖形。D3大部分是在SVG上繪制的，并且提供了大量的圖形生成器，使得在SVG上繪制圖形變得簡(jiǎn)單。另外，由于SVG是矢量圖，所以放大縮小不會(huì)有精度損失。1.1.3D3的適用范圍D3開(kāi)發(fā)的應(yīng)用是顯示在網(wǎng)頁(yè)上的。因此，開(kāi)發(fā)者需將數(shù)據(jù)置于服務(wù)器端，并在網(wǎng)頁(yè)文件（HTML）中插入D3代碼。用戶(hù)通過(guò)瀏覽器請(qǐng)求此網(wǎng)頁(yè)文件，就會(huì)看見(jiàn)開(kāi)發(fā)者希望讓用戶(hù)看到的可視化內(nèi)容。BenFry在他的著作《VisualizingData》中將數(shù)據(jù)可視化的過(guò)程分為七個(gè)步驟。（1）獲取——Acquire（2）分析——Parse（3）過(guò)濾——Filter（4）挖掘——Mine（5）表現(xiàn)——Represent（6）改善——Refine（7）交互——Interact前四步不屬于D3的處理范圍，更多的是處理后三步，即表現(xiàn)、改善、交互。1.2數(shù)據(jù)可視化是什么數(shù)據(jù)可視化（DataVisualization）起源于18世紀(jì)，WilliamPlayfair在出版的書(shū)籍《TheCommercialandPoliticalAtlas》中第一次使用了柱形圖和折線(xiàn)圖，當(dāng)時(shí)是為了表示國(guó)家的進(jìn)出口量，在今天依然這么使用。19世紀(jì)初，出版了《StatisticalBreviary》一書(shū)，里面第一次使用了餅狀圖，這三種圖形都是至今最常用的最著名的可視化圖形。19世紀(jì)中葉，數(shù)據(jù)可視化主要被用于軍事用途，用來(lái)表示軍隊(duì)死亡原因、軍隊(duì)的分布圖等。進(jìn)入20世紀(jì)，數(shù)據(jù)可視化有了飛躍性的發(fā)展。1990年，在人機(jī)界面學(xué)會(huì)上，作為信息可視化原型的技術(shù)被發(fā)表。1995年，IEEEInformationVisualization正式創(chuàng)立，信息可視化作為獨(dú)立的學(xué)科被正式確立。近年，隨著大數(shù)據(jù)時(shí)代的到來(lái)，數(shù)據(jù)可視化作為大量數(shù)據(jù)的呈現(xiàn)方式，成為當(dāng)前重要的課題。1.2.1目的Themaingoalofdatavisualizationisitsabilitytovisualizedata，communicatinginformationclearlyandeffectively.數(shù)據(jù)可視化的目的，是要對(duì)數(shù)據(jù)進(jìn)行可視化處理，以使得能夠明確地、有效地傳遞信息。—VitalyFriedman比起枯燥乏味的數(shù)值，人類(lèi)對(duì)于大小、位置、濃淡、顏色、形狀等能夠有更好、更快的認(rèn)識(shí)。經(jīng)過(guò)可視化之后的數(shù)據(jù)能夠加深人對(duì)于數(shù)據(jù)的理解和記憶。例如有以下的數(shù)據(jù)，請(qǐng)找出最大值：[321,564,1391,245,641,798,871]數(shù)據(jù)量比較小，用肉眼也能找出來(lái)，但更好的辦法是將數(shù)據(jù)進(jìn)行可視化處理，如圖1-1所示。圖1-1可視化后的柱形圖如圖1-1所示，很明顯，經(jīng)過(guò)可視化之后，數(shù)據(jù)變得容易理解了。1.2.2構(gòu)成要素?cái)?shù)據(jù)可視化的手法很多，其中有一些共通的視覺(jué)要素。?坐標(biāo)。數(shù)值的位置被對(duì)應(yīng)到直角坐標(biāo)系或極坐標(biāo)系上，如圖1-2所示。圖1-2對(duì)應(yīng)到坐標(biāo)系上?大小。數(shù)值的大小被對(duì)應(yīng)到圖形的大小上，如圖1-3所示。圖1-3對(duì)應(yīng)到大小上?色彩。數(shù)值的分類(lèi)和界限等對(duì)應(yīng)到不同的顏色上，如圖1-4所示。圖1-4對(duì)應(yīng)到顏色上?標(biāo)簽。數(shù)值的特征用標(biāo)簽來(lái)標(biāo)記，如圖1-5所示。圖1-5對(duì)應(yīng)到標(biāo)簽上?關(guān)聯(lián)。數(shù)值之間的聯(lián)系，用關(guān)聯(lián)線(xiàn)條等連接起來(lái)，如圖1-6所示。圖1-6對(duì)應(yīng)到關(guān)聯(lián)線(xiàn)條上如圖1-2至圖1-6所示，列舉了一些常見(jiàn)的將數(shù)據(jù)對(duì)應(yīng)到視覺(jué)要素的方式。這些方式經(jīng)過(guò)多數(shù)人的使用，是最容易被人理解也是最容易制作的，但是視覺(jué)要素并非局限于此。1.2.3相關(guān)概念數(shù)據(jù)可視化（DataVisualization）和信息可視化（InformationVisualization）很相近，有時(shí)幾乎可以等同。但嚴(yán)格來(lái)說(shuō)它們是不同的，它們的不同可以總結(jié)為一句話(huà)：數(shù)據(jù)可視化是對(duì)數(shù)字信息進(jìn)行可視化，信息可視化是對(duì)數(shù)字信息和非數(shù)字信息進(jìn)行可視化。1.3圖表種類(lèi)用于數(shù)據(jù)可視化的圖表種類(lèi)相當(dāng)多，這里列舉一些常用的圖表。實(shí)際應(yīng)用時(shí)可單獨(dú)使用，也可以多種聯(lián)動(dòng)。一般來(lái)說(shuō)，圖表要盡可能簡(jiǎn)單，能用簡(jiǎn)單的就用簡(jiǎn)單的。有的人可能會(huì)覺(jué)得簡(jiǎn)單的圖表太古老、不大氣，而追求復(fù)雜的圖表，這反而有點(diǎn)本末倒置。數(shù)據(jù)可視化的目的，是要使數(shù)據(jù)明確地、有效地傳遞，而簡(jiǎn)單的圖表是能夠最快被人認(rèn)可的。憑感覺(jué)自創(chuàng)圖表也是可以的，但要注意此圖表是否比原來(lái)的更簡(jiǎn)單易懂。下面列舉部分可視化圖表。要注意，一種圖表對(duì)應(yīng)的漢語(yǔ)名稱(chēng)可能有多種，在本節(jié)中使用的名稱(chēng)將作為本書(shū)的標(biāo)準(zhǔn)。1.柱形圖柱形圖是最常見(jiàn)、最容易理解的圖表，使用矩形的長(zhǎng)短來(lái)表示數(shù)據(jù)的大小。數(shù)據(jù)類(lèi)型一般是形如“時(shí)間—銷(xiāo)售額”這樣的二維數(shù)據(jù)集，圖表要表現(xiàn)的是“隨著時(shí)間的變化，銷(xiāo)售額的變化情況”（如圖1-7所示）。如將圖1-7的x軸和y軸替換，得到橫向的柱形圖，有時(shí)也稱(chēng)為條形圖，但本質(zhì)是一樣的，都是用柱形的長(zhǎng)短來(lái)表示數(shù)據(jù)的大小。此外，還可用矩形的寬窄來(lái)表示第三維的數(shù)據(jù)，使得一個(gè)圖里的信息量更大，但會(huì)加深理解的難度。圖1-7柱形圖2.散點(diǎn)圖散點(diǎn)圖使用三維數(shù)據(jù)集，將其中的二維數(shù)據(jù)分別對(duì)應(yīng)到x軸和y軸，再將第三維用點(diǎn)表示，而第三維數(shù)據(jù)是對(duì)應(yīng)前二維的。其直觀表現(xiàn)為在x軸和y軸的坐標(biāo)系中分布著很多點(diǎn)，如圖1-8所示。圖1-8散點(diǎn)圖圖1-8中x軸表示人口，y軸表示GDP，第三維數(shù)據(jù)為城市，所表示的內(nèi)容為各城市在人口和GDP的二維坐標(biāo)系中的分布。3.折線(xiàn)圖折線(xiàn)圖的目的與柱形圖類(lèi)似，也適合表示在二維數(shù)據(jù)集中，某一維相對(duì)于另一維的變化趨勢(shì)，不同的是：?折線(xiàn)圖較適合連續(xù)的數(shù)據(jù)，柱形圖較適合離散的數(shù)據(jù)。?折線(xiàn)圖較適合大量的數(shù)據(jù)，柱形圖較適合少量的數(shù)據(jù)。?折線(xiàn)圖用于表示多個(gè)數(shù)據(jù)集之間的比較時(shí)，效果較好。圖1-9表示的是中國(guó)和日本從2005年至2013年GDP的變化趨勢(shì)。圖1-9折線(xiàn)圖4.餅狀圖餅狀圖可以用于比較數(shù)值的大小，但是有一個(gè)缺點(diǎn)：如果數(shù)值之間差距不大，肉眼很難分辨。因此，最好用于表示某一個(gè)值占全體值的百分比，比如2014年各瀏覽器占市場(chǎng)份額的百分比、各操作系統(tǒng)的份額百分比、各編程語(yǔ)言的使用比等。如圖1-10所示，餅狀圖的每一塊都用標(biāo)簽表示出來(lái)，也可以用線(xiàn)連接到外部表示。另外，餅狀圖還有一些變種，如各扇形的半徑不同，該半徑可表示另一個(gè)數(shù)據(jù)量。圖1-10餅狀圖5.弦圖弦圖，主要用于表示節(jié)點(diǎn)之間的聯(lián)系。兩點(diǎn)之間的連線(xiàn)表示哪兩個(gè)節(jié)點(diǎn)具有聯(lián)系，線(xiàn)的粗細(xì)表示權(quán)重。如圖1-11所示，表示各城市的人口來(lái)自于哪些城市，后面章節(jié)會(huì)有詳細(xì)介紹，這里只要有個(gè)印象即可。圖1-11弦圖6.力導(dǎo)向圖力導(dǎo)向圖適合描述大量頂點(diǎn)之間的關(guān)系，各頂點(diǎn)之間具有相互的作用力。如圖1-12所示，各頂點(diǎn)之間用線(xiàn)相連，相連的頂點(diǎn)表示具有一定的關(guān)系。實(shí)際應(yīng)用時(shí)可以賦予頂點(diǎn)和連線(xiàn)各種意義，如可做成人物關(guān)系圖、力導(dǎo)向地圖等，具有很大的擴(kuò)展性。圖1-12力導(dǎo)向圖7.樹(shù)狀圖樹(shù)狀圖用于表示層級(jí)、上下級(jí)、包含與被包含關(guān)系，與之類(lèi)似的還有集群圖。如圖1-13所示，像樹(shù)枝一樣展現(xiàn)出省份和城市的包含關(guān)系。圖1-13樹(shù)狀圖8.打包圖打包圖，用于表示包含與被包含的關(guān)系，也可表示各對(duì)象的權(quán)重。如圖1-14所示，圓內(nèi)套圓表示節(jié)點(diǎn)的關(guān)系，圓的大小表示節(jié)點(diǎn)的權(quán)重。圖1-14打包圖9.分區(qū)圖分區(qū)圖用于表示包含與被包含關(guān)系，其表現(xiàn)形式很像將硬盤(pán)分區(qū)，如圖1-15和圖1-16所示。圖1-15矩形分區(qū)圖圖1-16圓形分區(qū)圖1.4學(xué)習(xí)方法首先，不要做以下兩件事?？吹侥骋粋€(gè)圖表，感覺(jué)很好，立即復(fù)制下來(lái)，希望通過(guò)簡(jiǎn)單地更改數(shù)據(jù)或參數(shù)，就能達(dá)到自己使用的目的。在完全不了解JavaScript的情況下學(xué)習(xí)D3。D3編程不一定用得到高深語(yǔ)法，但基礎(chǔ)知識(shí)是必要的。那么，D3難學(xué)嗎？有不少人認(rèn)為D3挺難學(xué)的，原因有三。1.官方文檔寫(xiě)得比較難官網(wǎng)上提供了API文檔，還有大量的例子。但是，大部分例子只有代碼，沒(méi)有文字說(shuō)明。API雖有說(shuō)明，但是卻沒(méi)有太多針對(duì)性的例子，使初學(xué)者感覺(jué)頭大。2.不好理解數(shù)據(jù)轉(zhuǎn)換和繪制分開(kāi)的模式一個(gè)函數(shù)，drawPie()，輸入數(shù)據(jù)，輸出繪制圖形，一般人的思維模式是這樣的。但是，D3偏偏將兩者分開(kāi)了，分開(kāi)之后能帶來(lái)極大的自由度，但是也使得初學(xué)者理解它有些困難。3.外語(yǔ)不好對(duì)大部分國(guó)人來(lái)說(shuō)，看英文文檔還是挺頭疼的，而中文資料相對(duì)不夠豐富。乍看上去，D3有些難學(xué)，但是一旦掌握了，就能適應(yīng)各種圖表的制作，自由度大，功能極強(qiáng)。有人說(shuō)，D3就像是Photoshop，其他的庫(kù)就像是Windows畫(huà)圖板：前者需要一定的時(shí)間學(xué)習(xí)，學(xué)成后在圖像處理上所向披靡；后者不需要學(xué)習(xí)時(shí)間，會(huì)和不會(huì)沒(méi)有太大的價(jià)值。這么比喻可能有點(diǎn)夸張，筆者有一個(gè)更好的比喻（靈感來(lái)源于辜鴻銘先生的文章）。D3就像是寫(xiě)毛筆字，其他的可視化庫(kù)就像是寫(xiě)鋼筆字。鋼筆字上手容易，下筆簡(jiǎn)單、快捷，寫(xiě)出來(lái)的東西叫作文章。毛筆字需要長(zhǎng)期磨煉，上手較難，但是一旦掌握了，便能行云流水，心隨念想，可進(jìn)可退，只在筆尖，寫(xiě)出來(lái)的東西叫作藝術(shù)。建議初學(xué)者從簡(jiǎn)單圖表開(kāi)始做起，尤其是柱形圖、散點(diǎn)圖、折線(xiàn)圖這三種最基礎(chǔ)的圖表。通過(guò)反復(fù)練習(xí)基礎(chǔ)圖表，掌握D3各大功能模塊的運(yùn)用方法，把基礎(chǔ)打好。如此，在制作復(fù)雜圖表時(shí)才能起到事半功倍的效果。如果急于求成，一開(kāi)始就著眼于“思維導(dǎo)圖”這樣的圖表，會(huì)步履維艱，斷不可為。下面是一些學(xué)習(xí)D3的網(wǎng)站：?/D3的官方網(wǎng)站，含有API和大量示例。?/mike/D3創(chuàng)始人制作的，有很多說(shuō)明文檔。?/table-of-contents，非常簡(jiǎn)單易懂的教程，文字解釋、圖片都十分清晰。此站開(kāi)設(shè)的目的就是為了讓人迅速而高效地掌握D3。?/筆者站點(diǎn)，有D3的一系列教程。本書(shū)分為基礎(chǔ)知識(shí)、常用圖表的制作、深度應(yīng)用三個(gè)部分。難度上由淺入深，建議依順序閱讀，在可以選擇跳過(guò)的部分會(huì)有提示。第2章Web前端開(kāi)發(fā)基礎(chǔ)本章內(nèi)容包括：瀏覽器和服務(wù)器HTML和CSS基礎(chǔ)JavaScript基礎(chǔ)DOM基礎(chǔ)SVG基礎(chǔ)本章簡(jiǎn)單介紹Web前端開(kāi)發(fā)的基礎(chǔ)，是學(xué)習(xí)D3的預(yù)備知識(shí)，主要針對(duì)沒(méi)有前端基礎(chǔ)的讀者。有一定基礎(chǔ)的讀者可選擇性閱讀，或遇到不明問(wèn)題時(shí)再查詢(xún)即可。第1節(jié)，介紹瀏覽器和服務(wù)器之間是如何進(jìn)行交互的。理解了這一點(diǎn)，才知道要在什么地方使用D3。第2節(jié)，講述HTML和CSS的基礎(chǔ)知識(shí)。HTML是用于描述網(wǎng)頁(yè)內(nèi)容的，CSS是用于定義網(wǎng)頁(yè)樣式的，它們相互獨(dú)立卻常一起出現(xiàn)。第3節(jié)，學(xué)習(xí)JavaScript，一種直譯式腳本語(yǔ)言，用于設(shè)定網(wǎng)頁(yè)的行為。D3就是基于JavaScript開(kāi)發(fā)的。第4節(jié)，介紹DOM，即文檔對(duì)象模型。它是針對(duì)結(jié)構(gòu)化文檔的一個(gè)接口，使用它可以動(dòng)態(tài)地訪(fǎng)問(wèn)和修改HTML文檔。第5節(jié)，學(xué)習(xí)SVG（可縮放矢量圖形）。SVG是一種畫(huà)圖板，繪制出來(lái)的是矢量圖，D3的圖形大部分是繪制在SVG上的。2.1瀏覽器和服務(wù)器瀏覽器（Browser）對(duì)我們來(lái)說(shuō)太重要了，每天早上看新聞要用到，工作時(shí)查詢(xún)資料要用到，看網(wǎng)絡(luò)視頻要用到，休閑娛樂(lè)也要用到。如果要評(píng)選每天使用得最多的軟件，恐怕就是瀏覽器了。那么，當(dāng)輸入網(wǎng)址進(jìn)入網(wǎng)站后，見(jiàn)到的圖片文字是從哪來(lái)的，怎么傳輸過(guò)來(lái)的，這些信息是存儲(chǔ)在哪里的，什么人準(zhǔn)備的呢？如圖2-1所示，管理員在服務(wù)器（Server）存儲(chǔ)各種信息，包括主頁(yè)、圖片、音樂(lè)、視頻等，服務(wù)器與因特網(wǎng)（Internet）相連。很多與因特網(wǎng)相連的用戶(hù)，通過(guò)個(gè)人電腦中的瀏覽器，發(fā)送請(qǐng)求給服務(wù)器，服務(wù)器就將其需要的信息（文字圖片等）傳送給用戶(hù)，用戶(hù)就能夠在瀏覽器上享受到各種服務(wù)。圖2-1瀏覽器與服務(wù)器的交互當(dāng)然，瀏覽器與服務(wù)器的交互實(shí)際上要復(fù)雜得多，但理解本書(shū)的內(nèi)容不需要知道那么多細(xì)節(jié)，有上述內(nèi)容已經(jīng)足夠。2.1.1瀏覽器瀏覽器軟件有很多，常見(jiàn)的有：（1）InternetExplorer（簡(jiǎn)稱(chēng)IE）是最常見(jiàn)的瀏覽器，由Windows系統(tǒng)自帶，發(fā)行于1995年，使用人數(shù)最多。目前的最新版本為IE12，還在使用的最古老的版本可能是IE6。IE系列占瀏覽器市場(chǎng)份額的一半以上，遠(yuǎn)超其同行。制作網(wǎng)頁(yè)時(shí)必須要考慮到用戶(hù)所使用的瀏覽器版本，有些遺憾的是，D3對(duì)IE8及以下版本支持不好。有人為使D3兼容IE8以下版本，做了各種努力，效果卻差強(qiáng)人意。不過(guò)，使用IE8以下版本的用戶(hù)目前已不足17%，并且還在不斷下降，舊版本被淘汰是大勢(shì)所趨，因此不必過(guò)于擔(dān)心此問(wèn)題。（2）Firefox（火狐）瀏覽器是相當(dāng)受歡迎的一款瀏覽器，目前已占有全球市場(chǎng)份額的13%，在某些國(guó)家的占有率超過(guò)80%。Firefox是Mozilla基金會(huì)開(kāi)發(fā)的開(kāi)源瀏覽器，以其穩(wěn)定的性能、良好的安全性、豐富的組件著稱(chēng)。由于其開(kāi)源性，大量的程序員、研究員、工程師在上面開(kāi)發(fā)擴(kuò)展組件，使其幾乎無(wú)所不能。（3）Chrome（谷歌）瀏覽器是由Google公司開(kāi)發(fā)的瀏覽器。其特點(diǎn)是簡(jiǎn)單、快速，并且不易崩潰。其界面相當(dāng)簡(jiǎn)潔，幾乎所有空間都用于顯示網(wǎng)頁(yè)，而且不僅瀏覽網(wǎng)頁(yè)的速度快，打開(kāi)軟件的速度也快，能明顯感覺(jué)到與別的瀏覽器之間的區(qū)別。本書(shū)中的所有代碼，都是用Chrome進(jìn)行測(cè)試的。IE、Firefox、Chrome三款瀏覽器所占市場(chǎng)份額之和超過(guò)90%，因此使用這三款對(duì)網(wǎng)頁(yè)程序進(jìn)行測(cè)試最重要。其他還有在蘋(píng)果計(jì)算機(jī)的系統(tǒng)MacOSX中使用的Safari瀏覽器，Opera瀏覽器，符合國(guó)人用戶(hù)習(xí)慣的360、搜狗、傲游等瀏覽器，種類(lèi)很多，如圖2-2所示，有些瀏覽器的內(nèi)核是一樣的，只是根據(jù)特定用戶(hù)的習(xí)慣做了組件的擴(kuò)展。D3可運(yùn)行于IE9+、Firefox、Chrome、Safari、Opera等瀏覽器。圖2-2各種瀏覽器的圖標(biāo)2.1.2服務(wù)器服務(wù)器是一個(gè)管理資源并為用戶(hù)提供服務(wù)的計(jì)算機(jī)。有各種規(guī)模的服務(wù)器，最小的可能與個(gè)人電腦配置差不多，但在處理能力、穩(wěn)定性、安全性等方面還是有差異的。近年來(lái)出現(xiàn)了云服務(wù)器，只需要支付相當(dāng)?shù)偷膬r(jià)格，即可擁有服務(wù)器，并且其管理方式比物理服務(wù)器更加簡(jiǎn)單高效。要使服務(wù)器能夠提供各種服務(wù)，需要安裝服務(wù)器軟件。如果要提供Web信息瀏覽服務(wù)，需要安裝Web服務(wù)器軟件，其主要需支持HTTP協(xié)議，能處理用戶(hù)發(fā)送過(guò)來(lái)的HTTP請(qǐng)求。常見(jiàn)的Web服務(wù)器軟件有Apache、Tomcat、IIS等。（1）ApacheHTTPServer（簡(jiǎn)稱(chēng)Apache）是Apache軟件基金會(huì)的一個(gè)開(kāi)放源碼的Web服務(wù)器軟件，可以在大多數(shù)計(jì)算機(jī)操作系統(tǒng)中運(yùn)行。由于其多平臺(tái)和安全性被廣泛使用，是最流行的Web服務(wù)器端軟件之一。（2）Tomcat也是Apache軟件基金會(huì)一個(gè)著名的服務(wù)器軟件，其與Apache的區(qū)別和聯(lián)系如下。Apache只支持HTML靜態(tài)網(wǎng)頁(yè)，通過(guò)插件可支持PHP；Tomcat支持ASP、JSP、PHP、CGI等動(dòng)態(tài)網(wǎng)頁(yè)。Apache是用C語(yǔ)言實(shí)現(xiàn)的；Tomcat使用Java實(shí)現(xiàn)的，更好地支持Servlet和JSP。Apache的穩(wěn)定性較好。Apache對(duì)于靜態(tài)頁(yè)面的解析速度比Tomcat快。Apache比Tomcat早，本質(zhì)上來(lái)說(shuō)Tomcat的功能可以替代Apache。（3）InternetInformationServices（IIS）是微軟公司提供的服務(wù)器軟件，除了提供Web服務(wù)之外，還提供FTP服務(wù)、SMTP服務(wù)等。其使用比較簡(jiǎn)單，早期版本漏洞較多，但從IIS6.0版本開(kāi)始做了大量修復(fù)，安全性有了大幅增長(zhǎng)。Web服務(wù)器軟件并非只是服務(wù)器計(jì)算機(jī)才能安裝，在個(gè)人電腦上也能安裝，這對(duì)于開(kāi)發(fā)者測(cè)試是十分方便的。本書(shū)中的示例，都使用ApacheHTTPServer進(jìn)行測(cè)試。安裝Apache的方法在第3章有詳細(xì)介紹。2.2HTML&CSSHTML（HyperTextMarkupLanguage）指的是超文本標(biāo)記語(yǔ)言，CSS（CascadingStyleSheets）指的是層疊樣式表。用瀏覽器打開(kāi)任意一個(gè)網(wǎng)頁(yè)，右鍵單擊頁(yè)面，選擇“查看網(wǎng)頁(yè)源代碼”命令，即可看到用于描述網(wǎng)頁(yè)內(nèi)容的源碼信息。最常見(jiàn)到的結(jié)構(gòu)有兩種，第一種形如：<!DOCTYPEhtml>

<html>

<head>

<title>宋詞</title>

</head>

<body>

<h1>一剪梅</h1>

<p>紅藕香殘玉簟秋，輕解羅裳，獨(dú)上蘭舟</p>

<p>云中誰(shuí)寄錦書(shū)來(lái)，雁字回時(shí)，月滿(mǎn)西樓</p>

</body>

</html>

另一種代碼的樣式形如：p{

color:red;

font-family:simsun;

font-size:20px;

}

前者就是HTML代碼，用于定義文檔的結(jié)構(gòu)和內(nèi)容，例如顯示什么文字、用段落顯示還是表格顯示等。后者是CSS代碼，用于定義HTML元素的樣式，如字體大小、背景顏色、布局等。要使用HTML和CSS來(lái)制作網(wǎng)頁(yè)，只需要在記事本程序里編寫(xiě)即可。新建一個(gè)后綴為.txt的文本文件，然后將后綴改為.html，再用記事本程序打開(kāi)后編寫(xiě)代碼。編寫(xiě)完保存之后，再使用瀏覽器打開(kāi)此文件，即可瀏覽效果。但是為了方便，一般使用功能更強(qiáng)大的記事本軟件（例如Notepad++、SublimeText），有代碼高亮的功能，能加快開(kāi)發(fā)速度。2.2.1HTML元素HTML是一種標(biāo)記語(yǔ)言，每個(gè)元素都有一個(gè)標(biāo)記標(biāo)簽（MarkupTag）。上面的代碼中，已經(jīng)使用了<html>、<body>、<p>等標(biāo)簽，都是用一對(duì)尖括號(hào)包圍的。標(biāo)簽有成對(duì)出現(xiàn)的，如<p>；也有不成對(duì)出現(xiàn)的，如<br/>。對(duì)于成對(duì)出現(xiàn)的標(biāo)簽，前一個(gè)叫作開(kāi)始標(biāo)簽，不帶斜杠；后一個(gè)叫作結(jié)束標(biāo)簽，帶斜杠。1.文檔聲明在上面的代碼中首先出現(xiàn)的是<!DOCTYPE>，這是一個(gè)聲明，不是HTML標(biāo)簽，其主要目的是告訴瀏覽器HTML的版本信息。此聲明需要在HTML的第一行書(shū)寫(xiě)。舊版的HTML4.01中，此聲明有三種形式：<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN"

"/TR/html4/loose.dtd">

<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01//EN"

"/TR/html4/strict.dtd">

<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Frameset//EN"

"/TR/html4/frameset.dtd">

其中，第一種是過(guò)渡模式；第二種是嚴(yán)格模式；第三種等同于第一種，但允許使用框架集內(nèi)容。在HTML5版本中，此聲明寫(xiě)作：<!DOCTYPEhtml>

2014年10月29日，萬(wàn)維網(wǎng)聯(lián)盟宣布HTML5標(biāo)準(zhǔn)最終制定完成，在這之前大部分瀏覽器就已經(jīng)支持了某些HTML5的特性。HTML5的應(yīng)用必然會(huì)越來(lái)越廣泛，因此，DOCTYPE的聲明盡可能寫(xiě)成HTML5的形式，而且此形式也最簡(jiǎn)潔。2.頭部<head>是頭部元素的標(biāo)簽，其包含的信息用于告訴瀏覽器文檔的標(biāo)題、頁(yè)面的編碼、腳本文件和樣式文件的引用地址等。?title定義文檔的標(biāo)題，此標(biāo)題包括：瀏覽器標(biāo)簽中的標(biāo)題、收藏頁(yè)面時(shí)的默認(rèn)標(biāo)題、顯示在搜索引擎結(jié)果中的標(biāo)題。使用方法為：<title>宋詞</title>

?meta定義元數(shù)據(jù)的信息。<meta>沒(méi)有結(jié)束標(biāo)簽，其用法是通過(guò)http-equiv或name指定信息的種類(lèi)，再用content來(lái)定義此種類(lèi)的內(nèi)容，常見(jiàn)的有：<metahttp-equiv="content-type"

content="text/html;charset=gb2312"/>

<metaname="description"content="HTMLDocument"/>

<metaname="keywords"content="HTML,CSS,JavaScript,D3"/>

第一行告訴瀏覽器文檔的類(lèi)型為HTML，使用的編碼為GB2312。第二行告訴搜索引擎網(wǎng)頁(yè)的主要內(nèi)容是什么。第三行告訴搜索引擎網(wǎng)頁(yè)的關(guān)鍵詞是什么。?link用于引用外部資源，如引用樣式表：<linkrel="stylesheet"type="text/css"href="style.css"/>

?style用于在文檔中定義CSS樣式，如果數(shù)量很多，則建議寫(xiě)在外部文件中，再用<link>引用。如果數(shù)量較少，有時(shí)為了便于查看HTML元素和CSS樣式的關(guān)系，可將其在<style>中定義。?script用于定義客戶(hù)端腳本，最常見(jiàn)的是JavaScript腳本，目前已經(jīng)成為事實(shí)上的標(biāo)準(zhǔn)語(yǔ)言。3.屬性標(biāo)簽可以擁有屬性，表示如下：name="value"

屬性名稱(chēng)不加引號(hào)，屬性值通常加雙引號(hào)，也可以加單引號(hào)。前面出現(xiàn)的rel="stylesheet"和name="keywords"都是屬性值。4.主體主體由<body>標(biāo)簽定義，<body>里包含著各種元素標(biāo)簽，用于表示文檔的內(nèi)容。大多數(shù)HTML元素標(biāo)簽被分為塊級(jí)元素和內(nèi)聯(lián)元素。塊級(jí)元素在顯示時(shí)會(huì)以新行表示，常見(jiàn)的如下所示。?h1、h2、h3、h4、h5、h6定義標(biāo)題，h1是最大的標(biāo)題，h6是最小的標(biāo)題。?p定義段落，末尾會(huì)自動(dòng)換行。?ul、ol、li定義列表，ul用于無(wú)序列表，ol用于有序列表，內(nèi)部再嵌套li，每行使用一個(gè)。無(wú)序列表使用小黑圓圈表示，有序列表使用數(shù)字表示。定義一個(gè)兩行的無(wú)序列表如下：<ul>

<li>張三</li>

<li>李四</li>

</ul>

?table表格，其中每行由<tr>定義，每列由<td>定義。定義一個(gè)兩行兩列的表格如下：<tableborder="1">

<tr>

<td>第一行，第一列</td>

<td>第一行，第二列</td>

</tr>

<tr>

<td>第二行，第一列</td>

<td>第二行，第二列</td>

</tr>

</table>

?div定義文檔中的分區(qū)或節(jié)，內(nèi)部包含任意其他元素。內(nèi)聯(lián)元素在顯示時(shí)不以新行表示，常見(jiàn)的如下所示。a超鏈接的標(biāo)簽，點(diǎn)擊后跳轉(zhuǎn)到目標(biāo)頁(yè)面，通過(guò)href來(lái)指定URL路徑。<ahref="/">數(shù)據(jù)可視化</a>

img圖片，通過(guò)src來(lái)指定圖片URL地址，alt設(shè)定當(dāng)圖片無(wú)法加載時(shí)顯示的文字。<imgsrc="dog.jpg"alt=”DogImage”/>

span用于組合行內(nèi)元素，添加在行內(nèi)元素之間。5.注釋注釋標(biāo)簽在瀏覽器中不會(huì)顯示，程序員自己可適當(dāng)添加以便閱讀。添加的方法為使用<!--和-->將內(nèi)容包含在里面。<!--<p>Thisisadog.-->

2.2.2CSS選擇器如果要給兩個(gè)段落定義相同的樣式，該如何做呢？<pstyle="color:red;background-color:yellow;font-size:22px;">

紅藕香殘玉簟秋，輕解羅裳，獨(dú)上蘭舟</p>

<pstyle="color:red;background-color:yellow;font-size:22px;">

云中誰(shuí)寄錦書(shū)來(lái)，雁字回時(shí)，月滿(mǎn)西樓</p>

上述代碼將兩個(gè)段落都設(shè)置成紅色字體、黃色背景、22px大小的字體。目的雖然達(dá)到了，但十分冗長(zhǎng)。如果有更多的段落需設(shè)置成這樣呢？這樣的代碼不僅不利于閱讀，而且當(dāng)希望將字體顏色改變成黑色時(shí)，需要改很多地方，非常不便。定義一個(gè)CSS選擇器，然后在段落標(biāo)簽中應(yīng)用該選擇器，即可達(dá)到目的。.pstyle{

color:red;

background-color:yellow;

font-size:22px;

}

在<p>元素中應(yīng)用選擇器。<pclass="pstyle">紅藕香殘玉簟秋，輕解羅裳，獨(dú)上蘭舟

<pclass="pstyle">云中誰(shuí)寄錦書(shū)來(lái)，雁字回時(shí)，月滿(mǎn)西樓

是否感覺(jué)心情愉快了許多，將來(lái)如果想要修改字體、顏色等，只需在選擇器中修改即可，不需要改動(dòng)HTML代碼，極大地提高了效率。要記住，HTML只應(yīng)用來(lái)描述網(wǎng)頁(yè)的內(nèi)容，如“標(biāo)題是什么”、“段落是什么”；而如何表現(xiàn)這些內(nèi)容，如“字體顏色”、“字體大小”等都使用CSS。除非必要，否則不要在HTML元素中添加大量的屬性來(lái)描述如何表現(xiàn)元素。1.語(yǔ)法CSS由兩部分組成：選擇器的名稱(chēng)和“屬性名稱(chēng)-屬性值”。selector{

name1:value1;

name2:value3;

name3:value3;

}

屬性名稱(chēng)與屬性值之間用冒號(hào)隔開(kāi)，每一對(duì)值之間加分號(hào)隔開(kāi)。冒號(hào)之后建議加一空格，有利于閱讀，空格不會(huì)影響效果。如果屬性值中間有空格，需要給值加引號(hào)：h1{font-family:"sansserif";}

2.選擇器一個(gè)CSS選擇器能對(duì)應(yīng)一個(gè)元素，也能對(duì)應(yīng)多個(gè)元素，也可能多個(gè)選擇器對(duì)應(yīng)一個(gè)元素。要達(dá)到不同的對(duì)應(yīng)方式，選擇器有如下數(shù)種類(lèi)型。?元素選擇器以HTML元素的標(biāo)簽作為名稱(chēng)。例如：p{color:blue;}

則所有段落的文字都會(huì)變?yōu)樗{(lán)色。?選擇器分組如果幾個(gè)選擇器的樣式相同，可用逗號(hào)分隔：h1,h2,p{

color:blue;

}

則<h1>、<h2>、<p>三個(gè)標(biāo)簽都將文字變?yōu)樗{(lán)色。?類(lèi)選擇器在選擇器名稱(chēng)前加一個(gè)點(diǎn)（.），表示是類(lèi)選擇器：.important{color:red;}

要應(yīng)用此類(lèi)，在元素標(biāo)簽里添加一個(gè)class屬性，<pclass="important">段落</pan>

如果此類(lèi)選擇器會(huì)應(yīng)用在很多標(biāo)簽里，而你只希望在段落的標(biāo)簽里才應(yīng)用此選擇器，可：p.important{color:red;}

要注意，p和.important之間沒(méi)有空格，如果加了空格則變?yōu)榕缮x擇器。?ID選擇器如果希望某個(gè)特定的元素具有某種樣式，可以使用ID選擇器。與類(lèi)選擇器不同的是，ID選擇器在文檔中只使用一個(gè)，但是即便多次使用，很多瀏覽器也能解讀。如此，就變得很像類(lèi)選擇器，建議不要使用多次。#index{font-weight:bold;}

<pid="index">Index1</p>

在選擇器名稱(chēng)前加#號(hào)，在元素屬性中添加id屬性即可，屬性值不需要加井號(hào)（#）。?派生選擇器派生選擇器又分為三種。如果希望p中的span元素應(yīng)用樣式，可在p與span之間加一空格，這個(gè)稱(chēng)為后代選擇器。pspan{color:red;}

如果只希望選擇p的直系子元素span，則在p與span之間加一個(gè)大于號(hào)（>），這個(gè)稱(chēng)為子元素選擇器。p>span{color:red;}

如果希望選擇緊接在h1元素之后的一個(gè)p元素，且h1和p擁有共同的父元素，則在h1和p之間加一個(gè)加號(hào)（+），這個(gè)稱(chēng)為相鄰兄弟選擇器。h1+p{color:red;}

3.屬性名稱(chēng)和屬性值屬性名稱(chēng)和屬性值是成對(duì)出現(xiàn)的，CSS中有很多屬性名稱(chēng)，最常見(jiàn)的屬性如下。?尺寸width：元素寬度。height：元素高度。?背景background-color：背景顏色。background-image：背景圖像。background-position：背景圖像的起始位置。background-repeat：背景圖像是否及如何重復(fù)。?文本color：文本顏色。line-height：行高。text-align：對(duì)齊元素中的文本。?字體font-family：字體。font-size：字體尺寸。font-style：字體風(fēng)格。font-weight：字體粗細(xì)。?邊框padding：內(nèi)邊距。border：邊框。margin：外邊距。?定位position：元素是靜態(tài)的、相對(duì)的、絕對(duì)的，還是固定的。top：到上邊界的距離。right：到右邊界的距離。bottom：到下邊界的距離。left：到左邊界的距離。float：浮動(dòng)。clear：清除浮動(dòng)。2.2.3綜合運(yùn)用HTML用于描述“內(nèi)容是什么”，CSS用于描述“如何表現(xiàn)此內(nèi)容”。下面舉一個(gè)例子，綜合使用HTML和CSS，來(lái)實(shí)踐前面的內(nèi)容。制作網(wǎng)頁(yè)時(shí)，首先要明確所需的網(wǎng)頁(yè)布局，假設(shè)布局如圖2-3所示。圖2-3網(wǎng)頁(yè)布局（各區(qū)域名稱(chēng)是div的id號(hào)）網(wǎng)頁(yè)被劃分為四塊區(qū)域?？捎胐iv來(lái)定義各區(qū)域，HTML結(jié)構(gòu)如下：<divid="

container

">

<divid="

header

">

</div>

<divid="

mainbody

">

<divid="

siderbar

">

</div>

<divid="

maincontent

">

</div>

</div>

<divid="

footer

">

</div>

</div>

分別用id屬性來(lái)標(biāo)示各區(qū)域，其中siderbar和maincontent被包含于mainbody中，最后再將所有區(qū)域塊都放入container區(qū)域塊里，方便操控。區(qū)域塊明確之后，首先在HTML里添加h1、p、ul等內(nèi)容標(biāo)簽，然后再為各區(qū)域塊定義樣式。如圖2-4所示，左圖是未添加CSS樣式之前的模樣，可以看到這是純粹的內(nèi)容，區(qū)域塊也沒(méi)有如圖2-3所示那樣布局。右圖是添加了CSS樣式之后，已經(jīng)變成了目標(biāo)布局，文字也美觀了不少。圖2-4HTML的內(nèi)容（左）加上CSS樣式之后的效果（右）圖2-4的布局中，siderbar和maincontent是使用浮動(dòng)屬性布局，這種布局被應(yīng)用在很多網(wǎng)站上。為HTML元素添加內(nèi)容后，代碼如下：<divid="siderbar">

<h3class="category">作者</h3>

<ul>

<li>柳永</li>

<li>蘇軾</li>

<li>歐陽(yáng)修</li>

<li>李清照</li>

</ul>

</div>

<divid="maincontent">

<p>寒蟬凄切。對(duì)<spanclass="important">長(zhǎng)亭</span>晚，驟雨初歇。</p>

<p>都門(mén)帳飲無(wú)緒，留戀處，<spanclass="important">蘭舟</span>催發(fā)。</p>

<p>執(zhí)手相看淚眼，竟無(wú)語(yǔ)凝噎。</p>

<p>念去去，千里煙波，暮靄沉沉楚天闊。</p>

</div>

使用h3、ul、li、p、span添加了內(nèi)容，要注意這些標(biāo)簽中都沒(méi)有包含樣式屬性，樣式都要在CSS選擇器中定義。接下來(lái)講解siderbar和maincontent這兩個(gè)id的樣式。#siderbar{

width:25%;

height:100%;

float:left

;

clear:left

;

border:1pxsolidgray;

border-radius:5px;

}

#maincontent{

width:73%;

height:100%;

float:right

;

clear:right

;

text-align:center;

border:1pxsolidgray;

border-radius:5px;

font-size:20px;

}

width和height是區(qū)域塊的寬度和高度，這里使用百分比，表示父元素寬高的百分之多少。float分別設(shè)定為left和right，表示前者向左浮動(dòng)，右者向右浮動(dòng)。clear表示清除浮動(dòng)。border用于定義區(qū)域塊的邊框，三個(gè)值依次為寬度、樣式、顏色。border-radius用于定義圓角邊框，值為圓角的半徑。font-size用于設(shè)定字體大小。2.3JavaScriptJavaScript是D3的開(kāi)發(fā)語(yǔ)言，使用D3時(shí)會(huì)涉及很多JavaScript的概念，因此基礎(chǔ)知識(shí)的掌握是必要的。JavaScript的語(yǔ)法并不復(fù)雜，與C/C++、Java很相似，只是記住語(yǔ)法可能只需要半個(gè)月，但想要得心應(yīng)手地使用可能需要數(shù)年。本節(jié)僅介紹學(xué)習(xí)D3所必需的基礎(chǔ)知識(shí)。2.3.1在HTML中使用JavaScript在HTML文檔中通過(guò)<script>標(biāo)簽來(lái)使用JavaScript。如果要在HTML里寫(xiě)JavaScript代碼，則：<scripttype="text/javascript">

console.log("Hello,World");

</script>

屬性type用于設(shè)定腳本語(yǔ)言的類(lèi)型，除了text/javascript之外，還可設(shè)定為text/ecmascript、text/vbscript等腳本語(yǔ)言。但JavaScript已成為事實(shí)上Web瀏覽器的標(biāo)準(zhǔn)語(yǔ)言，因此可不設(shè)定這個(gè)值。如果忽略，則默認(rèn)為JavaScript語(yǔ)言。上面的代碼輸出“Hello,World”字符串，函數(shù)console.log()能夠?qū)⑽谋据敵龅娇刂婆_(tái)。如果JavaScript是寫(xiě)在一個(gè)單獨(dú)的文件里的，那么引用方法為：<scriptsrc="/d3.v3.min.js"

charset="utf-8"></script>

通過(guò)src屬性來(lái)指向外部鏈接文件，此處指向了d3.v3.min.js的源文件，D3的所有代碼就是寫(xiě)在這個(gè)文件里的。有一點(diǎn)要注意，瀏覽器會(huì)按照<script>出現(xiàn)的順序依次加載，一個(gè)完了再加載另一個(gè)。如果<script>寫(xiě)在HTML的<head>里，加載的文件過(guò)多過(guò)大，則在加載的時(shí)間里用戶(hù)看到的是一片空白。因此，<script>也可以放到<body>中所有的內(nèi)容元素之后，讓瀏覽器先顯示內(nèi)容，再加載腳本。JavaScript文件的后綴名通常帶有.js擴(kuò)展名，但并不是必需的，瀏覽器不會(huì)檢查擴(kuò)展名。2.3.2語(yǔ)法1.區(qū)分大小寫(xiě)變量名、函數(shù)名是區(qū)分大小寫(xiě)的，因此name和Name是不同的。第一個(gè)字符必須是字母、下畫(huà)線(xiàn)（_）或美元符號(hào)，后面的字符可以有數(shù)字。2.注釋注釋分為單行注釋和多行注釋?zhuān)⑨尫椒ㄅcC/C++一樣：//varname=“zhangsan”;單行注釋

/*多行注釋

vara=10;

varb=a;

*/

3.分號(hào)每條語(yǔ)句結(jié)尾添加分號(hào)（;），雖然不添加瀏覽器也能解讀，但容易造成意想不到的錯(cuò)誤，因此建議都加上分號(hào)。4.花括號(hào)花括號(hào)的方法建議寫(xiě)成：functiongetName(person){

return;

}

而不是像C語(yǔ)言一樣寫(xiě)成：functiongetName(person)

{

return;

}

雖然兩種都不報(bào)錯(cuò)，但每種語(yǔ)言都有一些不成文的規(guī)范，只有符合規(guī)范代碼才能被更多人接受。2.3.3變量定義變量時(shí)使用var操作符，后跟變量名，多個(gè)變量名之間用逗號(hào)隔開(kāi)。如下所示：vara;//undefined

varb,c,d;//undefined

如果定義變量時(shí)不為其賦值，則默認(rèn)值為undefined，表示該值未定義。為防止出現(xiàn)意外后果，通常會(huì)在定義時(shí)為其賦值?？梢栽谝粋€(gè)var后對(duì)多個(gè)變量賦值，各變量間用逗號(hào)隔開(kāi)：vara=10;

varb=20,

c=25,

d=30;

JavaScript的變量是松散類(lèi)型的，所有變量的定義都是使用var，既可以是數(shù)值，也可以是布爾型（true或false），還可以是字符串。并且，即便一個(gè)變量初始值為數(shù)值，仍然可以將其他類(lèi)型的值賦給它：vara=26;

varb=false;

varc="message";

a="box";

a初始值為26，但仍可用字符串box為其賦值，這與C語(yǔ)言不同。雖然如此，變量的類(lèi)型最好自始至終都是確定的，不建議輕易更改。2.3.4數(shù)據(jù)類(lèi)型JavaScript有五種基本數(shù)據(jù)類(lèi)型：undefined、null、boolean、number、string。還有一種復(fù)雜數(shù)據(jù)類(lèi)型：object。變量屬于哪一種數(shù)據(jù)類(lèi)型可用typeof查看，如下所示：vara=26;

console.log(typeofa);//number

a變量中存儲(chǔ)的是數(shù)值26，屬于數(shù)值（number）類(lèi)型，因此使用typeof測(cè)定后，輸出了number。typeof是JavaScript的一個(gè)關(guān)鍵字。下面分別介紹六種數(shù)據(jù)類(lèi)型。1.undefined未初始化的變量默認(rèn)值都是undefined，表示該值未定義。如果某變量將來(lái)要為其賦值為其他基本數(shù)據(jù)類(lèi)型之一，那么將其初始化為undefined較好：varc=undefined;//初始為undefined

c=10;//將來(lái)將其賦值為number（數(shù)值）類(lèi)型的10

2.null與undefined十分類(lèi)似，不同之處在于：null表示一個(gè)空對(duì)象、undefined表示一個(gè)未定義的基本類(lèi)型的變量。如果某變量將來(lái)要為其賦值為object類(lèi)型，將其初始化為null較好。varo=null;

o={name:"zhangsan",age:19};

如果對(duì)一個(gè)賦值為null的變量用typeof檢測(cè)，結(jié)果是object：varo=null;

console.log(typeofo);//object

這其實(shí)也證明了null適合用于表示空對(duì)象，因此，當(dāng)不需要使用一個(gè)對(duì)象，將其清空時(shí)，可賦值為null。賦值之后，其類(lèi)型仍然為object，表示這個(gè)變量還是對(duì)象，只是被清空了而已。vare={name:"lisi",age:20};

e=null;

console.log(typeofe);//object

3.boolean布爾類(lèi)型有兩個(gè)值：true和false，表示“真”和“假”兩種狀態(tài)。在條件語(yǔ)句（如if）中，其他類(lèi)型的值會(huì)自動(dòng)轉(zhuǎn)換為布爾型。有五種值會(huì)轉(zhuǎn)換為false：0、NaN、undefined、null、""（空字符串），其他值均轉(zhuǎn)換為true。那么在進(jìn)行條件判斷時(shí)，即可使用如下語(yǔ)句：vara=10;

if(a){

console.log("數(shù)值不是0或NaN");

}

4.number數(shù)值可使用十進(jìn)制數(shù)、八進(jìn)制數(shù)、十六進(jìn)制數(shù)，八進(jìn)制數(shù)以零（0）開(kāi)頭，十六進(jìn)制數(shù)以0x開(kāi)頭：varnum_10=120;//十進(jìn)制數(shù)120

varnum_8=020;//八進(jìn)制數(shù)20，相當(dāng)于十進(jìn)制數(shù)16

varnum_16=0x3A;//十六進(jìn)制數(shù)3A，相當(dāng)于十進(jìn)制數(shù)58

浮點(diǎn)數(shù)值用小數(shù)點(diǎn)來(lái)表示，較大或較小的數(shù)可用指數(shù)來(lái)表示：varf=3.1415;//浮點(diǎn)數(shù)

varm=3e5;//指數(shù)形式，表示3*10⁵

JavaScript的數(shù)值類(lèi)型有范圍。最大數(shù)值為Number.MAX_VALUE，這個(gè)值通常為1.7976931348623157e+308；最小數(shù)值為Number.MIN_VALUE，這個(gè)值為5e-324。如果超出此范圍，正數(shù)則返回Infinity（正無(wú)窮），負(fù)數(shù)則返回-Infinity（負(fù)無(wú)窮）。另外，正數(shù)除以0返回正無(wú)窮，負(fù)數(shù)除以0返回負(fù)無(wú)窮。數(shù)值類(lèi)型還有一個(gè)特殊的值NaN，是NotaNumber的意思，表示不是一個(gè)數(shù)。5.string字符串類(lèi)型可由雙引號(hào)或單引號(hào)表示：varstr_1="China";

varstr_2='America';

字符串的長(zhǎng)度可用length得到：console.log(str_1.length);//5

兩個(gè)字符串拼接可用加號(hào)（+）實(shí)現(xiàn)：console.log(str_1+str_2);//ChinaAmerica

6.object對(duì)象object是擁有屬性和方法的數(shù)據(jù)類(lèi)型。屬性是與對(duì)象相關(guān)的值，方法是在對(duì)象上執(zhí)行的動(dòng)作?，F(xiàn)實(shí)生活中，樓房可以是對(duì)象，人也可以是對(duì)象。下面的做法就創(chuàng)建了一個(gè)對(duì)象。varperson=newObject();

但是，這個(gè)對(duì)象沒(méi)有屬性，也沒(méi)有方法。下面為其添加屬性和方法：="WangWu";

person.age=20;

person.growUp=function(){

this.age+=1;//年齡增加1歲

}

這段代碼增加了兩個(gè)屬性name和age，還有一個(gè)方法growUp()。接下來(lái)試著訪(fǎng)問(wèn)這些屬性和方法：console.log();//WangWu

console.log(person.age);//20

person.growUp();

console.log(person.age);//21

給方法命名的方式通常有兩種。一種是空格之后單詞的首字母大寫(xiě)，即growUp()；另一種是空格用下畫(huà)線(xiàn)代替（_），字母全用小寫(xiě)，即grow_up()。2.3.5操作符操作符用于數(shù)值的運(yùn)算、比較、判斷等操作，具體有以下幾類(lèi)。1.算術(shù)操作符算術(shù)操作符即加減乘除等操作，是最常用的操作符。varnum1=5+3;//加法，結(jié)果為8

varnum2=5-3;//減法，結(jié)果為2

varnum3=5*3;//乘法，結(jié)果為15

varnum4=5/3;//除法，結(jié)果為1.6666666666666667

varnum5=5%3;//求余，結(jié)果為2

num1++;//遞增，結(jié)果為9

num2--;//遞減，結(jié)果為1

2.賦值操作符算術(shù)運(yùn)算符和等號(hào)配合使用，能減少代碼的書(shū)寫(xiě)量：vara=18;//賦值，使用等號(hào)（=）

a+=3;//等同于a=a+3;結(jié)果為21

a-=2;//等同于a=a-2;結(jié)果為19

a*=4;//等同于a=a*4;結(jié)果為76

a/=2;//等同于a=a/2;結(jié)果為38

a%=7;//等同于a=a%7;結(jié)果為3

3.布爾操作符布爾操作符共有三個(gè)：非（!）、與（&&）、或（||）。varisDog=false;

varisAnimal=true;

console.log(!isDog);//true

console.log(isDog&&isAnimal);//false

console.log(isDog||isAnimal);//true

4.關(guān)系操作符關(guān)系操作符即大于（>）、小于（<）、大于等于（>=）、小于等于（<=）、相等（==）、全等（===）、不相等（!=）、不全等（!==）這八種。console.log(8>7);//true

console.log(8>=7);//true

console.log(8<7);//false

console.log(8<=7);//false

console.log("8"==8);//兩者轉(zhuǎn)換后相等，結(jié)果為true

console.log("8"===8);//兩者轉(zhuǎn)換后不相等，false

console.log("7"!=7);//兩者轉(zhuǎn)換后相等，false

console.log("7"!==7);//兩者轉(zhuǎn)換后不相等，true

特別要注意“相等”和“全等”的區(qū)別，相等操作符會(huì)自動(dòng)對(duì)數(shù)據(jù)類(lèi)型進(jìn)行轉(zhuǎn)換，全等則不會(huì)。5.條件操作符條件操作符只有一個(gè)：varresult=5>3?true:false;//true

如果問(wèn)號(hào)前的條件為true，則返回冒號(hào)之前的值；如果為false，則返回冒號(hào)之后的值。2.3.6語(yǔ)句語(yǔ)句用于流程控制，實(shí)現(xiàn)條件判斷、循環(huán)等功能。1.if-else語(yǔ)句最常見(jiàn)的條件判斷語(yǔ)句，可以單獨(dú)使用if，也可以添加elseif和else。if(20>33){

console.log("大于");

}elseif(20===33){

console.log("等于");

}else{

console.log("小于");//符合這個(gè)條件

}

2.while和do-while語(yǔ)句while語(yǔ)句是先測(cè)試條件再循環(huán)，do-while語(yǔ)句是先循環(huán)再判斷條件。vari=0;

while(i<5){//先判斷

i++;//再循環(huán)

}

varj=0;

do{

j++;//先循環(huán)

}while(j<10)//再判斷

3.for和for-in語(yǔ)句for是一種功能更強(qiáng)大的循環(huán)語(yǔ)句，緊跟的括號(hào)里用兩個(gè)分號(hào)分隔成三個(gè)部分，第一部分用于值的初始化，第二部分用于條件判斷，第三部分用于求新值：for(vari=0;i<5;i++){

console.log(i);//0,1,2,3,4

}

for-in主要用于枚舉對(duì)象屬性和方法，如對(duì)于以下對(duì)象：="WangWu";

person.age=20;

person.growUp=function(){

this.age+=1;//年齡增加1歲

}

則可寫(xiě)代碼如下：for(varpropinperson){

console.log(prop);//輸出name,age,growup

}

4.switch語(yǔ)句與if類(lèi)似，用于條件判斷。switch適于判斷的情況是，如果某變量是這個(gè)值的情況下，執(zhí)行某操作，如果是那個(gè)值，執(zhí)行另一操作。每種情況最后要用break結(jié)尾，防止繼續(xù)往下判斷。vari=20;

switch(i){

case10://判斷過(guò)此值，不符合

console.log(10);

break;//用break跳出switch

case20://判斷過(guò)此值，符合

console.log(20);//輸出20

break;//用break跳出switch

case30://沒(méi)有判斷過(guò)此值

console.log(30);

break;

default://如果都不符合，默認(rèn)怎么處理

console.log("都不符合");

}

5.break、continue和label語(yǔ)句break語(yǔ)句可退出循環(huán)，不再判定下次執(zhí)行循環(huán)的條件；continue只是退出本次循環(huán)，還會(huì)繼續(xù)判定下次是否執(zhí)行循環(huán)：for(vari=0;i<3;i++){

if(i===1)

break

;

console.log(i);//只輸出0

}

for(vari=0;i<3;i++){

if(i===1)

continue

;

console.log(i);//輸出0和2

}

但是，break和continue都只能跳出當(dāng)前花括號(hào)的循環(huán)。如果要跳出多重循環(huán)，會(huì)比較麻煩。因此，可以配合label使用，用于跳出多重循環(huán)。label標(biāo)記在循環(huán)之前：fori

:for(vari=0;i<3;i++){

for(varj=0;j<3;j++){

if(i==1&&j==0)

break

fori

;

console.log(i+"\t"+j);

}

}

fori即最外層循環(huán)的label名稱(chēng)，在break之后加上此名稱(chēng)即可指定跳出哪個(gè)循環(huán)。2.3.7函數(shù)JavaScript的函數(shù)使用function關(guān)鍵字來(lái)聲明，后跟參數(shù)及函數(shù)體。與C/C++或Java等不同，JavaScript中函數(shù)的參數(shù)不需要指定數(shù)據(jù)類(lèi)型。其基本語(yǔ)法如下：function

add(num1,num2){

returnnum1+num2;

}

上面定義了一個(gè)函數(shù)名為add的函數(shù)，函數(shù)體里執(zhí)行的是兩個(gè)數(shù)相加并返回。然后即可使用此函數(shù)名來(lái)調(diào)用函數(shù)：vara=add(3,5);//a的值為8

還有一種定義函數(shù)的方法：varadd=

function

(num1,num2){

returnnum1+num2;

}

表面上看是將一個(gè)無(wú)名函數(shù)function賦值給了一個(gè)變量add，這種方式在后續(xù)D3的學(xué)習(xí)中會(huì)經(jīng)常見(jiàn)到。2.3.8對(duì)象在2.3.4節(jié)里說(shuō)過(guò)一些關(guān)于對(duì)象的內(nèi)容，提供了一種創(chuàng)建對(duì)象的方式。除此之外，還有一些常見(jiàn)的創(chuàng)建對(duì)象的方法：varperson={

name:"WangWu",//兩個(gè)屬性之間要添加逗號(hào)

age:20,

growUp:function(){

this.age+=1;

}//如果之后還有屬性，這里也要添加逗號(hào)

}

還有一種方法，可制作一個(gè)構(gòu)造函數(shù)，然后即可使用new來(lái)創(chuàng)建對(duì)象，對(duì)于習(xí)慣了C或Java的人可能會(huì)感到很開(kāi)心：functionPerson(name,age){

=name;

this.age=age;

this.growUp=function(){

this.age+=1;

}

}

varwangwu=

newPerson

("WangWu",18);

調(diào)用對(duì)象的屬性有兩種方法，都很常用：console.log();//小圓點(diǎn)

console.log(wangwu["name"]);//方括號(hào)

通常使用小圓點(diǎn)的方式，但方括號(hào)的方式也很重要，有一些場(chǎng)合只能使用這種方式。另外，使用方括號(hào)的方式調(diào)用函數(shù)也是可以的：wangwu["growUp"]();

2.3.9數(shù)組數(shù)組是常用的數(shù)據(jù)結(jié)構(gòu)，用一對(duì)方括號(hào)即可定義。JavaScript的數(shù)組其實(shí)是一種對(duì)象。使用typeof檢測(cè)，可知數(shù)組是object類(lèi)型：vara=[1,2,3,4,5];

console.log(typeofa);//object

同一數(shù)組里還可以是不同類(lèi)型的值：vara=[1,"apple",false,4,5];

還有一種使用Array構(gòu)造函數(shù)創(chuàng)建數(shù)組的方法：vara=newArray(1,2,3,4);//長(zhǎng)度為4，數(shù)組項(xiàng)分別為1,2,3,4的數(shù)組

varb=newArray(20);//長(zhǎng)度為20，數(shù)組項(xiàng)還沒(méi)有賦值的數(shù)組

通過(guò)這種方式，更能清楚地看到數(shù)組是對(duì)象。因此可以想象，數(shù)組里的各項(xiàng)其實(shí)就是這個(gè)Array對(duì)象里的屬性，屬性的名稱(chēng)分別為0、1、2、3（數(shù)組的序號(hào)）等。那么能否使用如下方式調(diào)用呢？console.log(a.1);//不能得到結(jié)果

結(jié)果出錯(cuò)。前面說(shuō)過(guò)，JavaScript的變量名是不能以數(shù)字開(kāi)頭的，因此數(shù)組里的屬性名稱(chēng)0、1、2、3等可看作是特例，是數(shù)組專(zhuān)用的。第2.3.8節(jié)中提到調(diào)用對(duì)象的方式除了使用小圓點(diǎn)之外，還可使用方括號(hào)的方式：console.log(a["1"]);//得到正確的結(jié)果

這樣就證明了數(shù)組項(xiàng)其實(shí)是對(duì)象的屬性，數(shù)組項(xiàng)的序號(hào)實(shí)際上是屬性的名稱(chēng)。這一點(diǎn)對(duì)于理解數(shù)組是什么非常重要。另外，數(shù)組的長(zhǎng)度可用length來(lái)獲取。length屬性是可以賦值的，賦值之后，超出此長(zhǎng)度的部分就不能使用了。varcity=["Beijing","Shanghai","Guangzhou"];

console.log(city.length);//3

console.log(city);//["Beijing","Shanghai","Guangzhou"]

city.length=1;//將長(zhǎng)度賦值為1

console.log(city);//["Beijing"]

給數(shù)組添加項(xiàng)，可以直接給指定序號(hào)的項(xiàng)賦值：city[10]="GuiLin";

console.log(city.length);//11

其實(shí)，從序號(hào)3～9都是沒(méi)有項(xiàng)的，但是length的值卻為11。length總是比最大的序號(hào)大1（數(shù)組序號(hào)從0開(kāi)始），與中間有多少項(xiàng)無(wú)關(guān)。給數(shù)組添加和刪除項(xiàng)的方法，還可使用以下函數(shù)。?push：在末尾添加項(xiàng)。?pop：將末尾項(xiàng)刪除并返回。?shift：將第一項(xiàng)刪除并返回。?unshift：從最前面推入項(xiàng)。2