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

 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

 <head>

     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />

     <title>D3学习记录</title>

     <style>

     .chart{

         background-color: #3498db;

         text-align: right;

         padding: 3px;

         margin: 1px;

         color: white;

     }

     </style>

     <!-- 导入D3.js -->

     <script src="js/d3.v3.min.js"></script>

 </head>

 <body>

     <script>

     //create a data

     var data = [4, 8, 5, 2, 10, 20];

     //创建一个容器

     var chart = d3.select("body")//选择元素

                     .append("div")//创建并添加新元素到选定元素后

                     .attr("class", "chart");//设置或获取指定属性

     //向容器中添加几个div元素

     chart.selectAll("div")//选择该元素的多个子元素组成元素集

             .data(data)//设置或获取一组元素的绑定数据dataSet

             .enter()//返回一个新的绑定了数据的元素

             .append("div")

             .style("width", function(d){

                 return d*10 + 'px';

             })

             .text(function(d){

                 return d;

             })

     </script>

 </body>

 </html>

D3.js也是一个javascript框架，像jquery一样， 只不过他的特长是在数据可视化这一块而已。所以不要觉得D3是多么的复杂。在上面的代码中我们可以看到D3的一些用法：

　　选择元素：d3.select(“element”)，这个就是jquery中的$()，只不过没有采用简写的形式。

　　创建并添加新元素到选定元素后：.append("element")，就是javascript中的append方法一样，他返回的是一个添加了该新元素的元素集。

　　设置或获取指定属性：.attr(name[, value])，同jquery中的attr()。

D3.js采用的是像jquery中的链式方法，在执行一个操作后可以继续调用其他的方法，但是，我们需要注意的是，前一个方法的输出类型必须要和下一个方法的输入类型相匹配！

　　选择所选的元素中的多个子元素组成新的选择集:selectAll("obj")，创建一个selection，这样我们可以往里面填充数据。不过现在的选择集还没有插入到文档，因为我们还要给这些空的选择集加入数据，

　　设置或获取一组元素的绑定数据：.data(dataset)，这样selection分配数据了，D3会根据数据来进行合理的分配，分配好了，这些selection下一步该插入到文档中了，

　　返回一个新的、绑定了数据的元素：.enter()， 这样子我们的之前创建的election就可以使用了。他们在DOM中有了自己的位置，我们终于可以往他身上进行操作了！

　　设置HTML属性：.attr()

　　设置CSS样式：.style()

D3.js学习记录【转】【新】的更多相关文章

  1. D3.js学习记录

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

  2. D3.js学习记录 - 数据类型【转】【新】

    1.变量 JAVASCRIPT的变量是一种类型宽松的语言.定义变量不用指定数据类型.而且还是动态可变的. var value = 100;value = 99.9999;value = false;v ...

  3. 我的three.js学习记录（三）

    此次的亮点不是three.js的3d部分,而是通过调用摄像头然后通过摄像头的图像变化进行简单的判断后进行一些操作.上篇中我通过简单的示例分析来学习three.js,这次是通过上一篇的一些代码来与摄像头 ...

  4. 数据可视化的优秀入门书籍有哪些,D3.js 学习资源汇总

    习·D3.js 学习资源汇总 除了D3.js自身以外,许多可视化工具包都是基于D3开发的,所以对D3的学习就显得很重要了,当然如果已经有了Javascript的经验,学起来也会不费力些. Github ...

  5. 我的three.js学习记录（二）

    通过上一篇文章我的three.js学习记录(一)基本上是入门了three.js,但是这不够3D,这次我希望能把之前做的demo弄出来,然后通过例子来分析操作步骤. 1. 示例 上图是之前做的一个dem ...

  6. vue.js学习记录

    vue.js学习记录 文章已同步我的github笔记https://github.com/ymblog/blog,欢迎大家加star~~ vue实例 生命周期 beforeCreate:不能访问thi ...

  7. D3.js学习（一）

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

  8. D3.js学习（七）

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

  9. D3.js学习笔记（六）——SVG基础图形和D3.js

    目标 在这一章,我们将会重温SVG图形,学习如何使用D3.js来创建这些图形. 这里会包括前面例子中的SVG基础图形以及如何使用D3.js设置图形的属性. 使用D3.js画一个SVG 的 圆 circ ...

随机推荐

  1. JVM学习之GC常用算法

    出处:博客园左潇龙的技术博客--http://www.cnblogs.com/zuoxiaolong,多谢分享 GC策略解决了哪些问题? 既然是要进行自动GC,那必然会有相应的策略,而这些策略解决了哪 ...

  2. Linux 二进制包安装MySQL的一些问题

    第一步:安装相关的依赖yum install perl-Data-Dumper 第二步:初始化mysql数据库的内部信息./scripts/mysql_install_db --basedir=/us ...

  3. 4.java.lang.NumberFormatException（数据类型转换异常）

    字符串转换为数字异常 当试图将一个String转换为指定的数字类型,而该字符串确不满足数字类型要求的格式时,抛出该异常.如现在讲字符型的数据“123456”转换为数值型数据时,是允许的. 但是如果字符 ...

  4. sqoop安装与使用

    sqoop简介 sqoop名字是怎么来的?Sqoop: SQL-to-Hadoop 连接传统数据库和hadoop的桥梁,把关系型数据库的数据导入到hadoop系统(如HDFS,HBASE和hive中) ...

  5. Windows7中搭建Android x86_64及armv8-a操作步骤

    1.        从https://developer.android.com/tools/sdk/ndk/index.html 下载android-ndk-r10d-windows-x86_64. ...

  6. paip.c++ qt messagebox用法

    paip.c++ qt messagebox用法 作者Attilax ,  EMAIL:1466519819@qq.com  来源:attilax的专栏 地址:http://blog.csdn.net ...

  7. objective-c 关键字和概念

    @ 看到这个关键字,我们就应该想到,这是Object-C对C语言的扩展,例如@interface XXX. @interface 声明类 @implementation 实现类 @protocol 声 ...

  8. asp.net 前台js和后台得到FormView中的控件，以TextBox为例

    一.前台js获取FormView中的控件 js得到前端控件的ID,比如TextBox(这里设置其ID为TextBox1),大家都知道,是document.getElementById("&l ...

  9. HTML之学习笔记（十）表单元素

    html表单元素的基本格式为(必须包含在form标签中)

  10. gulp脚本编写方法

    建立一个gulpfile.js文件,内容直接抄gulp-htmlmin的readme: var gulp = require('gulp'); var htmlmin = require('gulp- ...