最近大半个月都和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. Redis 学习笔记（篇一）：字符串和链表

    本次学习除了基本内容之外主要思考三个问题:why(为什么).what(原理是什么).which(同类中还有哪些类似的东西,相比有什么区别). 由于我对 java 比较熟悉,并且 java 中也有字符串 ...

  2. JVM(七):JVM内存结构

    JVM(七):JVM内存结构 在前几节的文章我们多次讲到 Class 对象需要分配入 JVM 内存,并在 JVM 内存中执行 Java 代码,完成对象内存的分配.执行.回收等操作,因此,如今让我们来走 ...

  3. maven_nexus私服搭建

    搭建很简单,但是新版本运行方式有所区别,于此记录一下: 1.下载程序包:http://www.sonatype.org/nexus/downloads/ 官网比较慢,下了一小时.期间在csdn花了一积 ...

  4. 微信jssdk支付坑

    1.使用easywechat开发的时候,由于没有注意,配置文件中默认的请求地址是 https://api.weixin.qq.com/结果调试了半天,一直报错“40066” 这也是怪自己粗心,结果去分 ...

  5. Node.js实现PC端类微信聊天软件（五）

    Github StackChat 学习回顾 Socket.io 结合Express创建Socket.io服务器 const app = require('express')() const http ...

  6. [apue] 管道原子写入量的一个疑问

    PIPE_BUF定义了管道可原子写入的数据量,在我的系统(CentOS 6.7)上这个值是4096,写了个程序验证了一下,通过三个维度来考察: N: 生产者数量 M:每个生产者的生产次数 P:每次写入 ...

  7. 前端Web浏览器基于Flash如何实时播放监控视频画面（一）之获取监控摄像头的RTSP流

    本片文章只是起到抛砖引玉的作用,能从头到尾走通就行,并不做深入研究.为了让文章通俗易懂,尽量使用白话描述. 0x001: 获取 现在市场上普见的摄像头都支持RTSP协议,如果你不懂什么是RTSP协议, ...

  8. iOS 唤起APP之Universal Link(通用链接)

    什么是Universal Link(通用链接) Universal Link(通用链接)是Apple在iOS9推出的一种能够方便的通过传统HTTPS链接来启动APP的功能,可以使用相同的网址打开网址和 ...

  9. Windows 应用容器化

    背景 在这个时间点,我们可能已经对 Linux 容器使用已经达到熟练掌握的程度,因为 Docker 与 Kubernetes 都是最早为 Linux 平台设计.当我们从容器这项技术中体会到种种收益,对 ...

  10. 【深入浅出-JVM】（3）：浮点数

    -5 浮点数推导 二进制转十进制 1 10000001 01000000000000000000000 1 10000001 101000000000000000000000 如果指数位不全为 0 则 ...