做D3相关的开发需要以下几个概念：
1. HTML
超文本标记语言用来构建web浏览器的内容，一个简单的HTML页面像这样
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>Page Title</h1>
<p>This is a really interesting paragraph.</p>
</body>
</html>2. DOM
DOM(Document Object Model)是指HTML的层级结构，每一个括号标签是一个“元素”，我们用人际关系中的词来指代元素的相对关系：“父母”、“孩子”、“兄弟”、
“祖先”、“后代”。在上面的HTML代码中，body是h1和p的父元素，其中h1和p互为兄弟。页面所有的元素都是html元素的后代。web浏览器的DOM解析是为了理解
网页的内容。
3. CSS
层叠样式表是用来风格化HTML页面的视觉呈现。一个简单的CSS样式表看起来像这样：
body {
background-color: white;
color : black;
}
h1 /* Selects level 1 headings */
p /* Selects paragraphs */
.caption /* Selects elements with class "caption" */
#subnav /* Selects element with ID "subnav" */规则的属性逐渐积累形成了样式：
color: pink;
background-color: yellow;
margin: 10px;
padding: 25px;
p {
font-size: 12px;
line-height: 14px;
color: black;
}D3用CSS样式选择器识别要操作的元素，所以学会使用它很重要。CSS规则可以直接包含在文档的<head>内，像这样：
<head>
<style type="text/css">
p {
font-family: sans-serif;
color: lime;
}
</style>
</head>或者保存在以“css”为后缀的外部文件中，然后在<head>中引用：
<head>
<link rel="stylesheet" href="style.css">
</head>3. JavaScript
JavaScript是一种动态脚本语言,可以在已经加载后指示浏览器页面做修改，脚本可以直接包含在HTML中，在两个script标签之间：
<body>
<script type="text/javascript">
alert("Hello, world!");
</script>
</body>或者保存在外部文件中，然后在HTML中引用，一般在<head>中：
<head>
<title>Page Title</title>
<script type="text/javascript" src="myscript.js"></script>
</head>4. SVG
D3在呈现可缩放矢量图形的视觉效果表现非常好。SVG是一种基于文本的图象格式，这意味着你可以通过写一些简单的标记代码去指定一个SVG图
的样子，这有点类似于HTML的标签。实际上，SVG代码可以直接包括在任何HTML文档。Web浏览器已经支持SVG格式很多年，Internet Explorer除外。
<svg width="50" height="50">
<circle cx="25" cy="25" r="22"
fill="blue" stroke="gray" stroke-width="2"/>
</svg>在D3中你可能不需要使用SVG，但是你很快就会发现，SVG提供了一些了视觉机会，这是你在普通的HTML元素中不可能遇见的。
扫一扫
2657
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
