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. JS键盘事件之键控Div

    自上次做的鼠标拖动Div之后,看到fgm.cc的例子,发现用键盘操控Div貌似也是十分有趣,这些DOM操作随着jquery的没落,虽然渐渐少用了,不过有些DOM操作还是必不可少的.现在是虽然数据为王( ...

  2. Unity 动画系统目录

    引言 提到动画,你想到的是什么? 图片在循环播放构成的动画.UI物体的循环变色.2D 3D物体在循环运动.链条弹簧的运动.3D的玩家在行走奔跑挥剑.非人形的运动... 动画实现方式的分类 动画实现的方 ...

  3. Codeforces Round #363 (Div. 2) A

     Description There will be a launch of a new, powerful and unusual collider very soon, which located ...

  4. Helvetic Coding Contest 2016 online mirror B1

    Description The zombies are gathering in their secret lair! Heidi will strike hard to destroy them o ...

  5. net core 的Generic Host 之Generic Host Builder

    前言 通用Host(Generic Host) 与 web Host 不同的地方就是通用Host解耦了Http请求管道,使得通用Host拥有更广的应用场景.比如:消息收发.后台任务以及其他非http的 ...

  6. [Windows] 一些简单的CMD命令

    开始菜单中的“运行”是通向程序的快捷途径,输入特定的命令后,即可快速的打开Windows搜索的大部分程序,熟练的运用它,将给我们的操作带来诸多便捷. winver 检查Windows版本 wmimgm ...

  7. Visual Studio中的引用项目和直接引用DLL文件

    在VS中引用类库时有多种方法,其中用的最多的就是在引用时选择项目选项卡引用本解决方案下的类库项目和选择浏览选项卡直接引用类库DLL文件,实际上这两种引用方式略有不同,今天就为大家总结下. C#本地项目 ...

  8. Error: connect ECONNREFUSED 127.0.0.1:8080

    Error: connect ECONNREFUSED 127.0.0.1:8080    at Object.exports._errnoException (util.js:1018:11)    ...

  9. Java正则表达式—小应用—简易爬虫

         在上一篇中,学习了正则表达式的四个功能.即匹配.分割.替换.获取. 利用获取功能,可以实现简单的网页爬虫. 4,获取:将字符串中的符合规则的子串取出. 获取功能的操作步骤: 1,将正则表达式 ...

  10. <Android 应用 之路> 天气预报（五）

    前言 写了上一篇文章,讲了下这个实现天气预报的使用内容,现在又到了看代码的时候,主要还是贴代码,然后添加足够的注释. 聚合数据SDK配置 将juhe_sdk_v_X_X.jar以及armeabi文件夹 ...