D3学习之画布制作
最近大半个月都和d3斗争,学习艰辛(呜呜……)如果觉得作者写的对你有用,可以打赏作者哦!owo
起言:结合自己的学习之路,我认为要想使用d3画图搞清楚布局很重要,层次分明,就给了你很大的灵活性,写起代码来就不死板,本文就是给你解释svg在网页中的层次,当然,如果你想理解本文,你还需要一些html的基础知识作为铺垫。
一、【D3图表在html中的结构】
svg:可伸缩适量图像
g:一个分组的元素,相当于html中的div元素;图表都放到g元素中
由图标我们可以知道,svg是html网页的一个元素,g元素是svg中的一个块级元素(div)
上面的层级是这样的:首先我们在html的body元素中声明了一个ID是container的div元素
之后我们在container这个div元素中添加了一个svg画布
其次我们在svg中又添加了一个g元素,并进行了移位。
<!DOCTYPE html>
<!--混合嵌入式代码的集合-->
<html>
<head>
<meta charset="utf-8">
<title>画布制作</title>
<style>
#container{
background: #ddd;
width: 500px;
height: 250px;
}
</style>
</head>
<body>
<div id="container"> </div>
<script src="https://cdn.bootcss.com/d3/3.5.15/d3.js"></script><!--d3在线引用文档-->
<script>
var svg=d3.select("#container")/*使用select选择了div(container)元素*/
.append("svg")//在container元素中使用append函数添加了一个svg画布
.attr("width",450)//attr是attribute的缩写,so,可以使用attr给svg添加属性
.attr("height",200);/*在svg中我把宽高分别设置为了450、200px;
特意与div(container)元素加以区分,以理解D3图表在html中的结构*/
d3.select("svg")//此时选中的svg是上面定义的svg及其复加的内容
.append("g")//添加g元素
.attr("transform","translate(50,30)");//设置偏移量
</script>
</body>
</html>
上面的代码是可以运行的,可以下载来亲自试一下效果会更好。
设置偏移量的时候涉及到了html网页坐标,在这就简单介绍一下;
网页页面的原点在左上角,绘图的坐标系是如上图所示的。
总结:本章介绍了svg元素和g元素在网页页面中的所处的位置,建立了设置svg画布的模型,
如果你是一个希望利用d3来实现数据可视化的玩家的话,本教程很适合你,记得点赞打赏哦。
TIPS:如果你是没有视频无法学习的视点怪的化,这有画布制作视频哦。
D3学习之画布制作的更多相关文章
- D3 学习
D3 学习笔记 D3简介 D3全称是Data-Driven Documents数据驱动文档,是一个开源的javascript库,可以用于数据可视化图形的创建,但不仅仅只是这些.可以查看d3帮助文档还有 ...
- 学习使用 CSS3 制作网站面包屑导航效果
作为最重要的导航展示形式之一,面包屑导航能够让用户更清楚的知道他们所在页面的层次结构,让他们可以方便的导航到上一层页面.在本教程中,您将学习如何使用 CSS3 技术创建自己的面包屑导航效果. 效果演示 ...
- 刚開始学习的人制作VMOS场效应管小功放
VMOS场效应管既有电子管的长处又有晶体管的长处,用它制作的功率放大器声音醇厚.甜美,动态范围大.频率响应好.因此近年来在音响设备中得到了广泛应用. 大功率的场效应管功率放大器.电.路比較复杂.制作和 ...
- D3学习笔记一
D3学习笔记一 什么是D3? D3(全称Data Driven Documents)是一个用来做Web数据可视化的JavaScript函数库.D3也称之为D3.js. D3是2011年由Mike Bo ...
- D3学习之地图
D3学习之地图 (2017.03.09-03.11) 地图的意义 在可视化领域中,将数据点投影和关联到地理区域上,是一个非常关键的内容(体现了可视化中利用读者自身知识常识从而加速吸收信息的原则). G ...
- D3学习之动画和变换
D3学习之动画和变换 ##(17.02.27-02.28) 主要学习到了D3对动画和缓动函数的一些应用,结合前面的选择器.监听事件.自定义插值器等,拓展了动画的效果和样式. 主要内容 单元素动画 多元 ...
- d3学习之路
d3学习历程: 轻量化编译器:HbuiderXHbuiderX使用教程 理解HTMl js CSS 三者关系 学习html js css :1)w3school 2)moo ...
- 【D3】D3学习轨迹-----学习到一定层度了再更新
1. 首先了解SVG的基本元素 http://www.w3school.com.cn/svg/ 2. 了解d3的专有名词 http://www.cnblogs.com/huxiaoyun90/p ...
- D3学习之:D3.js中的12中地图投影方式
特别感谢:1.[张天旭]的D3API汉化说明.已被引用到官方站点: 2.[馒头华华]提供的ourd3js.com上提供的学习系列教程,让我们这些新人起码有了一个方向. 不得不说,学习国外的新技术真的是 ...
随机推荐
- Java开发桌面程序学习(十)——css样式表使用以及Button悬浮改变样式实现
css样式表使用 javafx中的css样式,与html的有些不一样,javafx中的css,是以-fx-background-color这种样子的,具体可以参考文档JavaFx css官方文档 ja ...
- spring boot 2.x 系列 —— spring boot 整合 servlet 3.0
文章目录 一.说明 1.1 项目结构说明 1.2 项目依赖 二.采用spring 注册方式整合 servlet 2.1 新建过滤器.监听器和servlet 2.2 注册过滤器.监听器和servlet ...
- 系统学习 Java IO (十一)----打印流 PrintStream
目录:系统学习 Java IO---- 目录,概览 PrintStream 类可以将格式化数据写入底层 OutputStream 或者直接写入 File 对象. PrintStream 类可以格式化基 ...
- 【转】JDK 内存参数含义
Eclipse崩溃,错误提示: MyEclipse has detected that less than 5% of the 64MB of Perm Gen (Non-heap memory) ...
- Salesforce LWC学习(二) helloWorld程序在VSCode中的实现
上一篇我们简单的描述了一下Salesforce DX的配置以及CLI的简单功能使用,此篇主要简单描述一下LWC如何实现helloWorld以及LWC开发时应该注意的一些规范. 做国内项目的同学直观的感 ...
- 开源系统监控工具Nagios、Zabbix和Open-Falcon的功能特性汇总及优缺点比较
Nagios Nagios 全名为(Nagios Ain’t Goona Insist on Saintood),最初项目名字是 NetSaint.它是一款免费的开源 IT 基础设施监控系统,其功能强 ...
- shell遍历文件
取文件每行的数据,需要按列取 可以 sed 加管道 使用 awk 取列 platform="list.txt" line=`grep -vc '^$' $platform` ; ...
- Codeforces Gym100543L:Outer space invaders(区间DP)
题目链接 题意 有n个人,每个人有一个出现时间a和一个开枪时间b和一个距离d,在任意一个时刻,你可以选择炸人,你要炸一个人的花费是和他的距离d,并且所有的已经出现并且还没开枪的和你距离<=d的人 ...
- Codeforces Gym100623J:Just Too Lucky(数位DP)
http://codeforces.com/gym/100623/attachments 题意:问1到n里面有多少个数满足:本身被其各个数位加起来的和整除.例如120 % 3 == 0,111 % 3 ...
- gh-ost
目录 1.简介 2.为什么不用触发器 ? 3.命名由来 4.亮点 5.使用 6.它是如何工作的? 7.工作模式 7.1.模式1 -- 连上从库,在主库上修改 7.2.模式2 -- 直接在主库上修改 7 ...