d3.js--01
2024-09-27 18:05:33
D3 的全称是(Data-Driven Documents),顾名思义可以知道是一个被数据驱动的文档。听名字有点抽象,说简单一点,其实就是一个 JavaScript 的函数库,使用它主要是用来做数据可视化的。
使用:直接引用即可使用。
demo1:
使用d3来修改hello world
<html>
<head>
<meta charset="utf-8">
<title>HelloWorld</title>
</head>
<body>
<p>Hello World 1</p>
<p>Hello World 2</p>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
d3.select("body").selectAll("p").text("www.decembercafe.org");
</script>
</body>
</html>
//选择<body>中所有的<p>,其文本内容为 www.ourd3js.com,选择集保存在变量 p 中
var p = d3.select("body")
.selectAll("p")
.text("www.ourd3js.com"); //修改段落的颜色和字体大小
p.style("color","red")
.style("font-size","72px");
选择集
使用 d3.select() 或 d3.selectAll() 选择元素后返回的对象,就是选择集。
区别:select()只返回第一元素对象
selectAll()返回所有元素的对象
demo2:
圆形和矩形
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>first</title>
<style>
.mycircle{
fill:blue;
stroke:green;
stroke-width:3px;
}
.myrect{
fill: red;
stroke:green;
stroke-width: 6px;
} </style> </head>
<body>
<script src="d3.js"></script>
<script>
//动态插入html
var body = d3.select('body');
body.append('h1')
.text('hello world'); body.append('p')
.text('d3 d3');
//创建svg
var svg = body.append('svg')
.attr('width',400)
.attr('height',400);
svg.append('circle')
.attr('cx',100)
.attr('cy',200)
.attr('r',80)
.attr('class','mycircle'); svg.append('rect')
.attr('x',200)
.attr('y',0)
.attr('width',150)
.attr('height',200)
.attr('class','myrect'); </script> </body>
</html>
备注:svg矢量图
- 矩形 <rect>
- 圆形 <circle>
- 椭圆 <ellipse>
- 线 <line>
- 折线 <polyline>
- 多边形 <polygon>
- 路径 <path>
圆:circle cx:x轴坐标 cy:y轴坐标 r :半径
矩形:rect x:x轴坐标 y:y轴坐标
fill:填充属性
stroke:描边属性
stroke-width:描边宽度
最新文章
- C# Activator.CreateInstance()方法使用
- IOS开发:监听来电状态的改变。
- vim ctags使用方法
- android-数据存储之外部file存储(sdcard)
- latextools \cite 自动补全
- [原创]CI持续集成系统环境--Gitlab+Gerrit+Jenkins完整对接
- Wcf Restful Service服务搭建
- hduoj 4712 Hamming Distance 2013 ACM/ICPC Asia Regional Online —— Warmup
- OC项目中使用Swift
- 5、Java Swing布局管理器(FlowLayout、BorderLayout、CardLayout、BoxLayout、GirdBagLayout 和 GirdLayout)
- Split分割字符串
- LeetCode &; Q122-Best Time to Buy and Sell Stock II-Easy
- 解决使用redis作为session缓存 报错 Error: no such key 的问题
- Java NIO6:选择器1——理论篇
- Lodop打印项对象类型属性区分
- idea快捷键使用
- 数据层的多租户浅谈(SAAS多租户数据库设计)
- 试着用c写了一个多线程的同步
- linux centos7 安装mono
- Web API统一异常处理 【转载】