要想使用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.在JavaScript的代码后面加入上面的代码,刷新网页,然后按F12进入开发者模式,点击console标签,会看到里面输出了段落标签的个数2.<script> var len=document.getElementsByTagName('p').length; console.log(len); </script>
此外DOM还设计有类似C++中MFC的事件监听机制,像鼠标的点击,滑动等。上面的代码监听了三个事件,第一个针对第一个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>