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：描边宽度

d3.js--01的更多相关文章

  1. D3.js学习（七）

    上一节中我们学会了如何旋转x轴标签以及自定义标签内容,在这一节中,我们将接触动画(transition) 首先,我们要在页面上添加一个按钮,当我们点击这个按钮时,调用我们的动画.所以,我们还需要在原来 ...

  2. D3.js学习（一）

    从今天开始我将和大家一起学习D3.js(Data-Driven Documents),由于国内关于D3的学习资料少之又少,所以我觉得很有必要把自己学习过程记录下来,供同学们参考,如果文章有有哪些表达有 ...

  3. D3.js学习记录

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. D3.js部署node环境开发

    总结一段D3.js部署node环境的安装过程 准备阶段: 首先电脑上要安装node环境,这个阶段过滤掉,如果node环境都不会装,那就别玩基于node环境搞的其他东西了. 搭建环境: 我在自己的F:系 ...

  5. d3.js读书笔记-1

    d3.js入门 d3入门 D3是一个强大的数据可视化工具,它是基于Javascript库的,用于创建数据可视化图形.在生成可视化图形的过程中,需要以下几步: 把数据加载到浏览器的内存空间: 把数据绑定 ...

  6. 【 D3.js 进阶系列 — 6.1 】 缩放的应用（Zoom）

    缩放(Zoom)是另一种重要的可视化操作,主要是使用鼠标的滚轮进行. 1. zoom 的定义 缩放是由 d3.behavior.zoom() 定义的. var zoom = d3.behavior.z ...

  7. [资料搜集狂]D3.js数据可视化开发库

    偶然看到一个强大的D3.js,存档之. D3.js 是近年来十分流行的一个数据可视化开发库. 采用BSD协议 源码:https://github.com/mbostock/d3 官网:http://d ...

  8. D3.js 用层画条形图

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  9. 【 D3.js 入门系列 --- 3 】 做一个简单的图表！

    前面说了几节,都是对文字进行处理,这一节中将用 D3.js 做一个简单的柱形图. 做柱形图有很多种方法,比如用 HTML 的 div 标签,或用 svg . 推荐用 SVG 来做各种图形.SVG 意为 ...

  10. 【 D3.js 入门系列 --- 2.1 】 关于如何选择，插入，删除元素

    在D3.js中,选择元素的函数有两个:select 和 selectAll . 先说明一下它们的区别: select 是选择所有指定元素的第一个 selectAll 是选择指定元素的全部(以用于后面同 ...

随机推荐

  1. EIGRP-5-EIGRP数据包格式

    EIGRP数据包直接承戟在IP数据包中.协议号为88.EIGRP数据包的最大长度取决于具体接口上的最大IP MTU设置——通常完整IP数据包为1500字节.其中1480字节可以用于 EIGRP数据包. ...

  2. Unity 行为树-共享变量

    一.引言 有以下小场景: 节点A:发现了 敌人. 节点B:追逐敌人. 对于同一个敌人物体,节点AB之间是如何传递数据 的呢? 行为树节点AB之间,需要一个中间变量Temp来传递数据. A发现了敌人,将 ...

  3. P3823_[NOI2017]蚯蚓排队 哈希+脑子

    之前就写过一遍,今天却写挂了,查了半天发现是数组名写错啦$qwq$ 观察到$K$很小,所以使得我们可以哈希(怎么什么都能哈希$qwq$).我们把长度小于等于$50$的子串扔到哈希表里,并统计出现次数, ...

  4. 在SpringBoot中使用Docker（利用dockerfile-maven-plugin插件）

    周末在家做了一个实验: 将Docker通过插件的方式集成到SpringBoot中 然后通过Maven命令根据项目中的Dockerfile自动生成Docker镜像,同时将镜像推送到远程Linux服务器( ...

  5. Sandcastle Help File Builder 生成NET帮助文档

    Sandcastle是微软提供的一个根据XML注释和DLL文件生成帮助文件的工具,目前是在CodePlex上的一个开源项目,可以去这里下载:Sandcastle Sandcastle生成的输出结果具有 ...

  6. Murano Weekly Meeting 2015.07.21

    会议时间: 2015.07.21 主持人: Kirill Zaitsev, core from Mirantis 会议摘要:  1.murano client和murano dashboard升级到y ...

  7. Hadoop 3节点集群无法成功启动zookeeper

    今天在集群上跑程序的时候遇到了zookeeper无法成功启动的问题,先分别启动了主节点和从节点的zookeeper进程,并且通过jps也看到zookeeper进程已经启动了,但通过指令查看进程状态的时 ...

  8. 10.&与&&以及位运算符。

    这是单独的一块,因为一条讲不清楚(虽然内容也不够一篇),而且我之前也没好好弄清楚,所以有必要写出来. 说位运算符也是从&与&&(|与||类似)之间的区别讲起的.事实上,对于两个 ...

  9. ssm（Spring、Springmvc、Mybatis）实战之淘淘商城-第十一天(非原创）

    文章大纲 一.课程介绍二.订单系统介绍三.项目源码与资料下载四.参考文章 一.课程介绍 一共14天课程(1)第一天:电商行业的背景.淘淘商城的介绍.搭建项目工程.Svn的使用.(2)第二天:框架的整合 ...

  10. 页面中引入百度地图，实例化后影响html5的表单元素date的上下箭头

    复现步骤: 使用百度地图的JavaScript的API,引入文件地址"http://api.map.baidu.com/api?key=&v=1.1&services=tru ...