一、D3画图简介

D3 是最流行的可视化库之一，它被很多其他的表格插件所使用。它允许绑定任意数据到DOM，然后将数据驱动转换应用到Document中。你可以使用它用一个数组创建基本的HTML表格，或是利用它的流体过度和交互，用相似的数据创建惊人的SVG条形图。原谅我上面这句是从网上抄的，语文不太好。反正说白了，D3就是一个用来在web界面画图的库。有了它我们画各种图形和坐标轴都更加方便了。

二、使用的基本函数

1. 元素选择函数

在D3中对HTML元素选取主要用到select和selectAll两个函数。select用于选取单个元素，selectAll用于选取页面中所有的该元素。

函数原型：d3.select()

函数参数：HTML元素

函数返回值：选择的HTML元素对象。

示例： var  p = d3.select("p");   //选择页面中的第一个<p>元素

函数原型：d3.selectAll()

函数参数：HTML元素

函数返回值：选择的HTML元素对象。

示例： var p = d3.selectAll("p");  //选择页面中所有的<p>元素

使用方式列举：

（1）选取单个元素

<body>

    <p></p>

<body>

d3.select("p">

  .text("测试");    //输出：测试

（2）选取所有元素

<body>

    <p></p>

    <p></p>

</body>

d3.selectAll("p")

    .text(function(v,i){

    return "测试" + i;

})

//输出: 测试0

//     测试1

（3）根据id选取元素

<body>

    <p></p>

    <p id="ceshi"></p>

</body>

d3.select("#ceshi")

    .text("ID选取");    //输出：ID选取

（4）根据class选取元素

<body>

    <p></p>

    <p class="ceshi"></p>

</body>

d3.select(".ceshi")

    .text("class测试")；

2. 数据绑定函数

（1）datum函数

函数原型：datum()

函数功能：绑定单个数据到选择集

示例：

<body>

    <p></p>

    <p></p>

</body>

var  str = "ceshi"

 d3.selsetAll("body")

    .datum(str)

    .text (function(v,i){

    return "第" + i + "个元素是" + v;

})

//输出：

//第0个元素是ceshi

//第1个元素是ceshi

（2）data函数

函数原型：data()

函数功能：将一个数组绑定到选择集

示例：

<body>

    <p></p>

    <p></p>

</body>

var  str = ["ceshi", "data"]

 d3.selsetAll("body")

    .datum(str)

    .text (function(v,i){

    return "第" + i + "个元素是" + v;

})

//输出：

//第0个元素是ceshi

//第1个元素是data

3. 元素添加函数

函数原型：append()

函数功能：在选择集后面添加元素

示例：

<body>

    <p>段落1</p>

</body>

d3.select(p)

    .append("p")

    .text("段落2");

//显示：

//段落1

//段落2

函数原型：insert()

函数功能：在选择集前面添加元素

示例：

<body>

    <p>段落1</p>

</body>

d3.select(p)

    .insert("p")

    .text("段落2");

//显示：

//段落2

//段落1

4. 元素移除函数

函数原型：remove()

函数功能：移除元素

示例：

<body>

    <p>段落1</p>

    <p>段落2</p>

</body>

d3.select(p)

    .remove();

//显示：

//段落2

这章就先介绍到这里，下一章将会将一些基本图形的画法。有点累了，下班回家。

D3画图学习一的更多相关文章

  1. D3.js学习（一）

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

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

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

  3. D3.js学习（六）

    上节我们学习了如何绘制多条曲线, 以及给不同的曲线指定不同的坐标系.在这节当中,我们会对坐标轴标签相关的处理进行学习.首先,我们来想一个问题, 如何我们的x轴上的各个标签的距离比较近,但是标签名又比较 ...

  4. D3.js学习（五）

    上一节我们已经学习了如何设置填充区域,其实理解了他的实现原理还是非常简单了.这一节中, 我们主要学习多条曲线的绘制,以及给不同的曲线指定不同的纵坐标. 新的数据 由于我们要画两条曲线,所以我们要在原来 ...

  5. D3.js学习（四）

    上一节我们已经学习了线条样式和格栅的绘制,在这一节中我们将要根据之前绘制的线条对图表进行填充,首先来看一下我们的目标吧 在这个图表中,我们对位于线条下面的空间进行了填充,那么,如何改做到呢? 设置填充 ...

  6. D3.js学习（三）

    上一节中,我们已经画出了图表,并且给图表添加了坐标轴的标签和标题,在这一节中,我们将要学习几个绘制线条不同特性的几个函数,以及给图表添加格栅.ok,进入话题! 如何给线条设置绘制的样式? 这个其实非常 ...

  7. 精通D3.js学习笔记（1）基础的函数

    买了本吕大师的d3可视化.最近来学习一下,做个笔记.   1.选择元素  select(第一元素) 和selectAll(全部的元素)      类似css的选择器.也可以是dom选中的. var i ...

  8. 【持续更新】D3 的学习资料

    经常有朋友问哪里有关于 D3 的比较好的学习资料,现整理成此文.以后找到更多更好的,会不断更新本文. 我是在2013年开始接触 D3 的,当时就觉得这个工具很好玩.至今,学习资料整理了不少.如果有朋友 ...

  9. D3.js学习记录【转】【新】

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

随机推荐

  1. 重新开始学习javase_集合_List

    一,List之ArrayList(转:http://blog.csdn.net/zheng0518/article/details/42198205) 1. ArrayList概述: ArrayLis ...

  2. thinkphp中ajax用户名校验

    ajax实在是太神奇了,刚刚接触,不足之处,请大家指正. 采用Ajax方式进行页面无刷新提示,来检测用户名是否存在. 搭建一个thinkphp的环境,在index.html中,ajax代码如下: &l ...

  3. POJ3320 Jessica's Reading Problem(尺取+map+set）

    POJ3320 Jessica's Reading Problem set用来统计所有不重复的知识点的数,map用来维护区间[s,t]上每个知识点出现的次数,此题很好的体现了map的灵活应用 #inc ...

  4. 试用ubuntu-12.04.3-desktop-amd64(二）

    首先说明,采用主机+虚拟机+ubuntu的形式,更具体的则为Win7-64bit + VMWare + ubuntu-12.04.3-desktop-amd64 进入ubuntu后首先考虑到的就是怎么 ...

  5. Android学习----打印日志Log

    Log.v(tag,msg);所有内容 Log.d(tag,msg);debug Log.i(tag,msg);一般信息 Log.w(tag,msg);警告信息 Log.e(tag,msg);错误信息 ...

  6. Jquery练手之-贪吃蛇

    记得以前刚出来工作的时候,什么都不懂.老板让用Jquery写一个功能,我不会写,然后跟老板说,我就是个.net程序员,为什么要写Jquery...后面我们老大给我写了!现在我才知道net程序员要会多少 ...

  7. Codeforces Round #313 A Currency System in Geraldion

    A  Currency System in Geraldion Time Limit:2000MS     Memory Limit:262144KB     64bit IO Format:%I64 ...

  8. iOS常用动画-b

    CoreAnimationEffect.h //  CoreAnimationEffect // //  Created by VincentXue on 13-1-19. //  Copyright ...

  9. asp.net WebForm 多语言的实现

    1.这里介绍的是实现中文和英文的切换.首先多语言的实现是采用资源文件的形式,建立2个多语言的资源文件.Resource.resx和Resource.zh-CN.resx. 2.将多语言这个属性放到用户 ...

  10. 转载——web前端相关资源总结

    前端牛人博客:张克军.阮一峰.拔赤(李晶).拔赤(李晶)2.张鑫旭.梦想天空.阿当.泽飞.刘杰(嗷嗷).为之漫笔(李松峰).goddyzhao.hax的技术部落.周爱民.随网之舞.子鼠.司徒正美.ju ...