最近大半个月都和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学习之画布制作的更多相关文章

  1. D3 学习

    D3 学习笔记 D3简介 D3全称是Data-Driven Documents数据驱动文档,是一个开源的javascript库,可以用于数据可视化图形的创建,但不仅仅只是这些.可以查看d3帮助文档还有 ...

  2. 学习使用 CSS3 制作网站面包屑导航效果

    作为最重要的导航展示形式之一,面包屑导航能够让用户更清楚的知道他们所在页面的层次结构,让他们可以方便的导航到上一层页面.在本教程中,您将学习如何使用 CSS3 技术创建自己的面包屑导航效果. 效果演示 ...

  3. 刚開始学习的人制作VMOS场效应管小功放

    VMOS场效应管既有电子管的长处又有晶体管的长处,用它制作的功率放大器声音醇厚.甜美,动态范围大.频率响应好.因此近年来在音响设备中得到了广泛应用. 大功率的场效应管功率放大器.电．路比較复杂.制作和 ...

  4. D3学习笔记一

    D3学习笔记一 什么是D3? D3(全称Data Driven Documents)是一个用来做Web数据可视化的JavaScript函数库.D3也称之为D3.js. D3是2011年由Mike Bo ...

  5. D3学习之地图

    D3学习之地图 (2017.03.09-03.11) 地图的意义 在可视化领域中,将数据点投影和关联到地理区域上,是一个非常关键的内容(体现了可视化中利用读者自身知识常识从而加速吸收信息的原则). G ...

  6. D3学习之动画和变换

    D3学习之动画和变换 ##(17.02.27-02.28) 主要学习到了D3对动画和缓动函数的一些应用,结合前面的选择器.监听事件.自定义插值器等,拓展了动画的效果和样式. 主要内容 单元素动画 多元 ...

  7. d3学习之路

    d3学习历程: 轻量化编译器:HbuiderXHbuiderX使用教程   理解HTMl js CSS 三者关系   学习html js css :1)w3school           2)moo ...

  8. 【D3】D3学习轨迹-----学习到一定层度了再更新

    1.  首先了解SVG的基本元素 http://www.w3school.com.cn/svg/ 2.  了解d3的专有名词  http://www.cnblogs.com/huxiaoyun90/p ...

  9. D3学习之：D3.js中的12中地图投影方式

    特别感谢:1.[张天旭]的D3API汉化说明.已被引用到官方站点: 2.[馒头华华]提供的ourd3js.com上提供的学习系列教程,让我们这些新人起码有了一个方向. 不得不说,学习国外的新技术真的是 ...

随机推荐

  1. Java开发桌面程序学习（十）——css样式表使用以及Button悬浮改变样式实现

    css样式表使用 javafx中的css样式,与html的有些不一样,javafx中的css,是以-fx-background-color这种样子的,具体可以参考文档JavaFx css官方文档 ja ...

  2. spring boot 2.x 系列 —— spring boot 整合 servlet 3.0

    文章目录 一.说明 1.1 项目结构说明 1.2 项目依赖 二.采用spring 注册方式整合 servlet 2.1 新建过滤器.监听器和servlet 2.2 注册过滤器.监听器和servlet ...

  3. 系统学习 Java IO (十一)----打印流 PrintStream

    目录:系统学习 Java IO---- 目录,概览 PrintStream 类可以将格式化数据写入底层 OutputStream 或者直接写入 File 对象. PrintStream 类可以格式化基 ...

  4. 【转】JDK 内存参数含义

    Eclipse崩溃,错误提示: MyEclipse has detected that less than 5% of the 64MB of Perm  Gen (Non-heap memory) ...

  5. Salesforce LWC学习(二) helloWorld程序在VSCode中的实现

    上一篇我们简单的描述了一下Salesforce DX的配置以及CLI的简单功能使用,此篇主要简单描述一下LWC如何实现helloWorld以及LWC开发时应该注意的一些规范. 做国内项目的同学直观的感 ...

  6. 开源系统监控工具Nagios、Zabbix和Open-Falcon的功能特性汇总及优缺点比较

    Nagios Nagios 全名为(Nagios Ain’t Goona Insist on Saintood),最初项目名字是 NetSaint.它是一款免费的开源 IT 基础设施监控系统,其功能强 ...

  7. shell遍历文件

    取文件每行的数据,需要按列取  可以 sed 加管道 使用 awk 取列 platform="list.txt" line=`grep -vc '^$' $platform` ; ...

  8. Codeforces Gym100543L：Outer space invaders（区间DP）

    题目链接 题意 有n个人,每个人有一个出现时间a和一个开枪时间b和一个距离d,在任意一个时刻,你可以选择炸人,你要炸一个人的花费是和他的距离d,并且所有的已经出现并且还没开枪的和你距离<=d的人 ...

  9. Codeforces Gym100623J：Just Too Lucky（数位DP）

    http://codeforces.com/gym/100623/attachments 题意:问1到n里面有多少个数满足:本身被其各个数位加起来的和整除.例如120 % 3 == 0,111 % 3 ...

  10. gh-ost

    目录 1.简介 2.为什么不用触发器 ? 3.命名由来 4.亮点 5.使用 6.它是如何工作的? 7.工作模式 7.1.模式1 -- 连上从库,在主库上修改 7.2.模式2 -- 直接在主库上修改 7 ...