厦门大学计算机科学系研究生课程Word下载.docx
- 文档编号:3020206
- 上传时间:2023-05-01
- 格式:DOCX
- 页数:24
- 大小:173.98KB
厦门大学计算机科学系研究生课程Word下载.docx
《厦门大学计算机科学系研究生课程Word下载.docx》由会员分享,可在线阅读,更多相关《厦门大学计算机科学系研究生课程Word下载.docx(24页珍藏版)》请在冰点文库上搜索。
学习D3可视化库需要的一些基础知识如下:
●HTML:
超文本标记语言,用于设定网页的内容
●CSS:
层叠样式表,用于设定网页的样式
●JavaScript:
一种直译式脚本语言,用于设定网页的行为
●DOM:
文档对象模型,用于修改文档的内容和结构
●SVG:
可缩放矢量图形,用于绘制可视化的图形
本部分主要介绍D3一些最基本的使用方法,以及生成一些比较简单的图表。
7.1添加元素
添加元素语法
d3.select("
body"
).append("
p"
).text("
Newparagraph!
"
);
为选择body标签,为之添加一个p标签,并设置它的内容为Newparagraph!
源代码:
1.<
html>
2.
head>
3.
meta
charset="
4.
title>
D3测试<
/title>
5.
script
type="
text/javascript"
src="
<
6.
/head>
7.
body>
8.
9.
New
paragraph!
10.
11.
/body>
12.<
/html>
13.
效果
7.2数据绑定
D3可以处理哪些类型的数据?
它会接受几乎任何数字数组,字符串,或对象(本身包含其他数组或键/值对)。
它可以处理JSON和GeoJSON
!
DOCTYPE
2.<
testD3-1.html<
5.<
This
is
my
HTML
page.
br>
12.
var
dataset
=
[
5,
10,
15,
20,
25
];
13.
14.
).selectAll("
)
15.
.data(dataset)
16.
.enter()
17.
.append("
18.
.text("
19.
20.<
语法说明
)
查找DOM中的body。
selectAll("
选择DOM中的所有段落。
由于没有存在,这将返回一个空的选择。
这个选择为空,代表段落很快就会存在。
data(dataset)
计数和分析我们的数据值。
有五个值,之后我们的数据集执行了5次,每个值一次。
enter()
绑定数据和DOM元素。
这个方法将数据传递到DOM中。
如果数据值比相应的DOM元素多,就用enter()创建一个新元素的占位符。
append("
通过enter()创建的占位符在DOM中插入一个p元素。
text("
为新创建的p标签插入一个文本值。
效果:
7.3使用数据
接上面一个例子可以显示数据值,还可以根据数据值来修改颜色值。
d表示当前数据值。
可以使用一个匿名函数处理这个数据。
testD3-3.html<
.text(function(d)
{
return
I
can
count
up
to
+
d;
})
20.
.style("
color"
function(d)
21.
if
(d
15)
//Threshold
of
15
22.
red"
;
23.
}
else
24.
black"
25.
26.
});
27.
28.
29.
30.<
7.4用层画条形图
(1)、为同类层添加样式
div.bar{
display:
inline-block;
width:
20px;
height:
75px;
/*We'
lloverridethislater*/
background-color:
teal;
}
(2)、声明要为某类层设置属性
.attr("
class"
"
bar"
(3)、为每个特定的层设置属性
height"
function(d){
varbarHeight=d*5;
//Scaleupbyfactorof5
returnbarHeight+"
px"
(4)、设置层之间的间隔
margin-right:
2px;
testD3-3-drawingDivBar<
style
text/css"
div.bar
display:
inline-block;
width:
20px;
height:
75px;
/*
Gets
overriden
by
D3-assigned
height
below
*/
2px;
background-color:
teal;
/style>
div"
30.
barHeight
d
*
5;
31.
32.
33.
34.
35.
36.<
7.5SVG概要
(1)、简单形状
SVG标签包含一些视觉元素,包括矩形,圆形,椭圆形,线条,文字和路径等。
基于像素的坐标系统,其中浏览器的左上角是原点(0,0)。
x,y的正方向分别是右和下。
矩形。
使用x和y的指定左上角的坐标,width和height指定的尺寸。
绘制SVG的矩形可以这样写:
rect
x="
0"
y="
width="
500"
height="
50"
/>
圆。
使用cx和cy,指定指定半径的中心的坐标,和ŗ表示半径。
例如:
circle
cx="
250"
cy="
25"
r="
椭圆。
使用cx和cy,指定指定半径的中心的坐标,rx和ry分别指定x方向和y方向上圆的半径,例如:
ellipse
rx="
100"
ry="
线。
使用x1和Y1到指定线的一端的坐标,x2和y2指定的另一端的坐标。
stroke指定描边使得线是可见的。
line
x1="
y1="
x2="
y2="
stroke="
black"
文本。
使用x和y指定文本的位置。
text
Easy-peasy<
/text>
可以给文本设置样式。
155"
font-family="
sans-serif"
font-size="
fill="
gray"
(2)、SVG的默认样式
SVG的默认样式没有中风是黑色填充。
如果你想别的,你就必须将样式应用到你的元素。
常见的SVG性质:
1.填充(fill)
-颜色值。
正如用CSS,颜色可以被指定为
命名的颜色-
green
十六进制值-
#3388aa或38A
RGB值-
RGB(10,150,20)
RGB与Alpha透明度-
RGBA(10,150,20,0.5)
6.描边(stroke)
7.描边宽度(stroke-width)
-数字(通常以像素为单位)。
8.不透明度(opacity)
-
0.0(完全透明)和1.0(完全不透明)之间的数值。
9.有了文字,也可以使用CSS样式,如:
字体家庭(font-family)
字体大小(font-size)
testD3-6-SVG.html<
.pumpkin
fill:
yellow;
stroke:
orange;
stroke-width:
svg
width=500
height=960>
225"
120"
80"
20"
rgba(128,
0,
128,
0.75)"
rgba(0,
255,
0.25)"
stroke-width="
75"
10"
125"
rgba(255,
300"
30"
purple"
305"
blue"
40"
310"
green"
36.
60"
315"
yellow"
37.
320"
38.
425"
22"
class="
pumpkin"
39.
525"
1.0)"
40.
41.
0.5)"
42.
43.
0.1)"
44.
625"
45.
46.
opacity="
0.9"
47.
65"
48.
49.
0.5"
50.
105"
51.
52.
0.1"
53.
/svg>
54.
55.<
7.6散点图
(1)、一般的散点绘制
用二维数组表示每个点的坐标
1.//Width
and
2.var
w
500;
3.var
h
100;
5.var
[5,
20],
[480,
90],
[250,
50],
[100,
33],
[330,
95],
[410,
12],
[475,
44],
[25,
67],
[85,
21],
[220,
88]
10.//Create
SVG
element
11.var
svg"
width"
w)
h);
svg.selectAll("
circle"
cx"
d[0];
cy"
d[1];
r"
5);
(2)、点的大小
控
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 厦门大学 计算机科学 研究生课程