#day.1 learning D3
因为最近和同学一起组队参加了2017年可视化大赛(http://chinavis.org/2017/challenge.html),我也在积极地应战中。
但是之前完全没有接触过D3相关知识,也从未接触过Javascript语言(像搭建网站什么的一直很想做呀!),只好无奈地从头学起了。
毕竟新手入门,这篇博客的目的一是记录我自己的学习情况,二是同时给一些新手学习的建议。
这里我自学的参考书目是老师所推荐的《精通D3.js交互式数据可视化高级编程》-吕之华著。
**个人配置**:操作系统是win8(当然个人觉得用Linux也很好更方便,但是我已经很久没有打开过Linux系统了orz)。在D3官网上下载了工具包,解压后直接在文件中使用。使用的文本编辑器是notepad++(版本7.3.3),在官网所下。当然直接用windows自带的记事本功能也可以。
一些推荐的辅助网站:
1.https://github.com/d3/d3/wiki/Gallery
2.http://www.open-open.com/lib/view/open1453215528980.html
3.https://d3js.org/ [D3官网]
以上都是我自学d3时用到的。
学习的几个关键点:
- html元素的学习
<!DOCTYPE>
<html>
<head>
<title>my frist page</title>
</head>
<body>
<h1>hello world</h1>
<p>!!!<\p>
<p>so what should I do?</p>
</body>
</html>
总结:在这一个经典的hello world程序里, 包含了几种html编程的常用标签。
- 在html中引用css的方法
发现若是用notepad++编辑html文本的时候无法在网页上出现预设的css选择器,不知道初学者会不会和我一样遇到过这样的瓶颈。
例如:
.hl{color:yellow;}
<p class = "hl">I change!</p>
<p class = "hl">What should I do next?</p>
在网页上的显示却是:
并没有按照书上所说的文字属性被转换了。
问题:没有关注到html综合运用的方法。
html——内容是什么
css——如何表现此内容
解决方法:
一个框架↓↓↓
<!DOCTYPE html>
<meta charset="utf-8">
<style>
The CSS 部分
</style>
<body>
<script type="text/javascript" src="d3/d3.v3.js"></script>
<script>
The D3 JavaScript code is here
</script>
</body>
- Javascript在html中的应用