【 D3.js 入门系列 — 2.1 】选择、插入、删除元素

【【 D3.js 入门系列 — 2.1 】选择、插入、删除元素】的更多相关文章

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

在D3.js中,选择元素的函数有两个:select 和 selectAll . 先说明一下它们的区别: select 是选择所有指定元素的第一个 selectAll 是选择指定元素的全部(以用于后面同时操作) 来看一个具体的例子,现有如下代码: <html> <head> <meta charset="utf-8"> <title>select,append,exit</title> </head> </…

【 D3.js 入门系列 — 2.1 】选择、插入、删除元素

1. select 和 selectAll 的区别在 D3 中,选择元素的函数有两个:select 和 selectAll,它们的使用非常重要.先说明一下它们的区别: select 是选择所有指定元素的第一个 selectAll 是选择指定元素的全部(用于同时操作) 这两个函数返回的结果称为选择集. 来看一个具体的例子,现有如下代码: <html> <head> <meta charset="utf-8"> <title>select,…

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

本人的个人博客首页为: http://www.ourd3js.com/ ,csdn博客首页为:http://blog.csdn.net/lzhlzz/. 转载请注明出处,谢谢. 在D3.js中,选择元素的函数有两个:select 和 selectAll . 先说明一下它们的差别: select 是选择所有指定元素的第一个 selectAll 是选择指定元素的所有(以用于后面同一时候操作) 来看一个详细的样例,现有例如以下代码: <html> <head> <meta cha…

【 D3.js 入门系列 --- 2 】如何使用数据和选择元素

接着上一讲的内容,这次讨论如何选择元素和使用数据. 现在页面中有三行文字,代码为: Hello World 1 Hello World 2 Hello World 3 定义一个集合set,里面有三个元素: var set = ["I like dog","I like cat","I like snake"]; 要用这三个字符串…

【 D3.js 入门系列 --- 2 】怎样使用数据和选择元素

本人的个人博客首页为: http://www.ourd3js.com/ ,csdn博客首页为:http://blog.csdn.net/lzhlzz/. 转载请注明出处,谢谢. 接着上一讲的内容,这次讨论怎样选择元素和使用数据. 如今页面中有三行文字.代码为: Hello World 1 Hello World 2 Hello World 3 定义一个集合set,里面有三个元素: v…

【 D3.js 入门系列 — 11 】入门总结

D3 新专题首页一转眼,这个入门系列已经积累了二十二篇文章之多,我想作为 D3.js 这款数据可视化工具的入门来说已经足够了.相信仅仅要看完本系列.以后全然能够在辅以查询的情况下完毕大部分可视化工作. D3.js 最早的 v1.0 版本号是由 Michael Bostock 于2011年2月18日公布,其后经过多人的不断完好,眼下最新的版本号为 v3.4.11.从公布至今三年多的时间里,D3.js 在国外不断有人尝试并制作教程.成为了流行的数据可视化工具.可是眼下在国内能查询到中文资料还比較少…

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

前面说了几节,都是对文字进行处理,这一节中将用 D3.js 做一个简单的柱形图. 做柱形图有很多种方法,比如用 HTML 的 div 标签,或用 svg . 推荐用 SVG 来做各种图形.SVG 意为可缩放矢量图形(Scalable Vector Graphics),SVG 使用 XML 格式定义图像,不清楚什么是SVG的朋友请先在 w3cschools 学习下,内容很少,很快就能掌握,不需要记住各种标签,只要知道大概是什么就行,用的时候再查. 先看下面的代码: <script src="…

【 D3.js 入门系列 — 1 】第一个程序 HelloWorld

记得以前刚上大一学 C 语言的时候,写的第一个程序就是在控制台上输出 HelloWorld .当时很纳闷,为什么要输出这个.老师解释说所有学编程入门的第一个程序都是在屏幕上输出 HelloWorld,这是惯例.呵呵,想来真是令人怀念. 好了,言归正传吧.本文的主要内容也是围绕 HelloWorld,不过不是单纯的输出. 1. HTML 是怎么输出 HelloWorld 的都知道 HTML 吧,如果不知道请下百度一下吧.在 HTML 中输出 HelloWorld 是怎样的呢,先看下面代码: <h…

【 D3.js 入门系列 --- 7 】理解 update, enter, exit 的使用

在前面几节中反复出现了如下代码: svg.selectAll("rect") .data(dataset) .enter() .append("rect") 当所选择的 rect 数量比绑定的数据 dataset 的数量少的时候,通常会用到以上代码,这一节就详细说说当被选择元素和数据数量不一致时该如何处理. 这一节将涉及到三个函数. 1. update() 当对应的元素正好满足时 ( 绑定数据数量 = 对应元素 ) 实际上并不存在这样一个函数,只是为了要与之后…

【 D3.js 入门系列 --- 5 】如何添加坐标轴

第3节中做了一个图标,但没有为它添加一个相应的坐标轴,这样不知道每一个柱形到底有多长.这一节做一个坐标轴. D3中的坐标轴都是以 svg 图的形式出现的,这也是为什么在第3节中要使用 svg 的方法做柱形图的原因.第4节里我们讲解了 scale (比例)的用法,在做坐标轴的时候也需要用到比例.第4节中,我们说到scale 是一个函数,这一节中的坐标轴也是一个函数,但是用法却有点不同,要注意. 看下面的代码,我们分别定义数据,scale (比例),坐标轴: var dataset = [ 30 ,…

【【 D3.js 入门系列 — 2.1 】 选择、插入、删除元素】的更多相关文章

【【 D3.js 入门系列 — 2.1 】选择、插入、删除元素】的更多相关文章