大数据可视化第二天——HTML、CSS、JavaScript、DOM、SVG

要想使用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.
<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>
上面的代码通过for循环，把cat和dog的内容都变成了hello world.里面的document操作还用到了DOM.
DOM

DOM（Document Object Model）文档对象模型，浏览器呈现一个html页面时会产生一个由页面的各种标签组成的交互式的图形对象，这个图形对象就叫做DOM.
<script>
	var len=document.getElementsByTagName('p').length;
	console.log(len);
</script>
在JavaScript的代码后面加入上面的代码，刷新网页，然后按F12进入开发者模式，点击console标签，会看到里面输出了段落标签的个数2.
此外DOM还设计有类似C++中MFC的事件监听机制，像鼠标的点击，滑动等。
<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>
上面的代码监听了三个事件，第一个针对第一个p标签，在点击时把背景变成蓝色，后面两个针对第二个p标签，在鼠标移入移出时做背景颜色的改变。
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>
显示效果如下图

大数据可视化第二天——HTML、CSS、JavaScript、DOM、SVG

HTML

CSS

JavaScript

DOM

SVG

猜你喜欢