大資料視覺化第二天——HTML、CSS、JavaScript、DOM、SVG
阿新 • • 發佈：2018-12-26
要想使用D3.js進行資料視覺化，不懂HTML、CSS肯定是不行的，D3本身由JavaScript封裝而成，另外D3中還用到了比較多的DOM和SVG方法。全部掌握了這些東西基本就是一個合格的前端工程師了，顯然將花費大量的精力和時間；我學習D3的目的主要是為了進行資料的視覺化，而不是進行Web前端頁面開發，所以我將簡要的學習D3中用到的這些內容，每個內容通過一個例子學習，在達到可以編寫基本的圖形之後，根據自己需求對相關D3例項進行更深入的學習，假如之後的工作中真的遇到其他的HTML、CSS之類的知識，可以到這裡查詢w3cSchool.
HTML
HTML是目前大部分網頁所使用的超文字標記語言，用一系列標籤來定義一個網頁中的不同元件，<h1><h2>定義頭部，<p>定義段落，<ol><ul>定義有序和無序列表，<div><span>可以用來自定義組，一個基本的HTML頁面如下所示：<!DOCTYPE html> <html> <head> <title>標題</title> </head> <body> 主內容 </body> </html>CSS
css是定義html頁面風格樣式的語言，通常可以通過標籤名、類、ID來和html標籤對應。產生的效果如下圖<!DOCTYPE html> <meta charset="UTF-8"> <div> <p>第一個設定所有段落標籤為藍色</p> <p class="red">第二個通過class設定當前段落背景紅色</p> <p id="id1">第三個通過ID覆蓋當前段落顏色黑色</p> </div> <style> p { color: blue; } .red { background: red; } #id1 { color: black; } </style>
JavaScript
JavaScript語言對於學習過Java、C++的人來說並不算太難，其諸如迴圈、判斷、分支、操作符、陣列都與這兩種語言類似，不同的是JavaScript是一種弱型別的語言，即資料型別無需嚴格宣告，包括function的定義，統一用var來定義。資料型別有undefined、null、boolean、number、string、object.上面的程式碼通過for迴圈，把cat和dog的內容都變成了hello world.裡面的document操作還用到了DOM.<body> <p>cat</p> <p>dog</p> </body> <script> var paragraphs = document.getElementsByTagName("p"); for(var i = 0;i<paragraphs.length;i++){ var paragraph = paragraphs.item(i); paragraph.innerHTML = "hello world"; } </script>DOM
DOM（Document Object Model）文件物件模型，瀏覽器呈現一個html頁面時會產生一個由頁面的各種標籤組成的互動式的圖形物件，這個圖形物件就叫做DOM.在JavaScript的程式碼後面加入上面的程式碼，重新整理網頁，然後按F12進入開發者模式，點選console標籤，會看到裡面輸出了段落標籤的個數2. 此外DOM還設計有類似C++中MFC的事件監聽機制，像滑鼠的點選，滑動等。<script> var len=document.getElementsByTagName('p').length; console.log(len); </script>上面的程式碼監聽了三個事件，第一個針對第一個p標籤，在點選時把背景變成藍色，後面兩個針對第二個p標籤，在滑鼠移入移出時做背景顏色的改變。<p id="click_me">Click me</p> <p >Hover me</p> <script> var click=document.getElementById("click_me"); click.onclick = function(){ this.style.backgroundColor = "blue"; } var hover = document.getElementsByTagName("p"); hover[1].onmouseenter = function(){ this.style.backgroundColor = "yellow"; } hover[1].onmouseleave = function(){ this.style.backgroundColor = ""; } </script>SVG
D3操作SVG影象來進行視覺化，SVG是一種向量圖形，所以不會有點陣圖的失真現象。所謂向量圖形，就是由文字定義圖形，比如起點終點，就定義在文字中的向量，然而顯示的時候還是以點陣圖顯示，不過不會因為解析度等原因出現失真現象了。
顯示效果如下圖<svg width="300" height="180"> <circle cx="30" cy="50" r="25" /> <circle cx="90" cy="50" r="25" class="red" /> <circle cx="150" cy="50" r="25" class="fancy" /> <rect x="10" y="80" width="40" height="40" fill="steelBlue" /> <rect x="70" y="80" width="40" height="40" style="fill: steelBlue" /> <rect x="130" y="80" width="40" height="40" class="fancy" /> </svg> <style> .red { fill: red; } .fancy { fill: none; stroke: black; stroke-width: 3pt; stroke-dasharray: 3,5,10; } </style>
