D3.js的基础部分之选择集的处理过滤器、选择集的顺序、each()和call()的应用(v3版本)

【D3.js的基础部分之选择集的处理过滤器、选择集的顺序、each()和call()的应用(v3版本)】的更多相关文章

D3.js的基础部分之选择集的处理过滤器、选择集的顺序、each()和call()的应用(v3版本)

选择集的处理 : 过滤器有时候需要根据绑定数据对某选择集的元素进行过滤,例如某公司,只对id大于100的员工进行奖励.某学校只选拔身高超过170cm的学生等.类似这样的问题,需要根据条件获取选择集的一部分子集,该方法成为过滤器. render() { return ( <div id="body" > </div> ); } // 定义数组,然后过滤到小于20的数,只选取大于20的数 var dataList = [10, 20, 30, 40, 50, 60…

D3.js的基础部分之选择集的处理 enter和exit的处理方法 (v3版本)

上一节给大家讲述额绑定数据的原理.当数组的长度与元素的数量不一致时,有enter部分和exit部分,前者表示存在多余的数据,后者表示存在多余的元素.本节将给大家介绍如何处理这些多余的东西,最后会给大家讲解一个处理模板,此模板包含处理enter.exit.update部分的内容. enter的处理方法 : 如果没有足够的元素,那么处理方法就是添加元素.请看代码 : render() { return ( <div id="body" > <p></p>…

D3.js的基础部分之数组的处理数组的排序和求值(v3版本)

操作数组 D3提供了将数组洗牌.合并等操作,使用起来是很方便的. d3.shuffle(array,[,lo[,ji]]) : //随机排列数组. d3.merge(arrays) : //合并两个数组. d3.pairs(array) : //返回邻接的数组对. d3.range([start,]stop[,step]) : //返回等差数列. d3.permute(array,indexes) : //根据指定的索引号数组返回排列后的数组. d3.zip(arra…

D3.js的基础部分之数组的处理映射(v3版本)

映射(Map) 映射(Map)是十分常见的一种数据结构,由一系列键(key)和值(value)组成的.每个key对应一个value,根据key可以获取和设定value,也可以根据key来查询value. 上面那个图展示了一个映射,该映射以每个值得id作为键,每个键对应一个值. d3.map()能构建映射,包括以下方法: d3.map([object][,key]) //构造映射.第一个参数是源数组,第二个参数用于指定映射的key. map.has(key) //如果指定的ke…

D3.js的基础部分之数组的处理集合(Set)(v3版本)

数组的处理之集合(set) 集合(Set)是数学中常用的概念,表示具有某种特定性质的事物的总体.集合里的项叫做元素.集合的相关方法有: d3.set([array]) //使用数组来构建集合,如果数组里有重复的元素,则只添加其中一项. set.has(value) //如果集合中有指定元素,则返回true,如果没有返回false. set.add(value) //如果该集合中没有指定元素,则将其添加到集合中,并返回该元素,如果有,则不添加 set.remove(value)…

D3.js的v5版本入门教程（第五章）—— 选择、插入、删除元素

D3.js的v5版本入门教程(第五章) 1.选择元素现在我们已经知道,d3.js中选择元素的函数有select()和selectAll(),下面来详细讲解一下假设我们的<body>中有三个<p>,如下 <p>dog</p> <p>cat</p> <p>pig</p> <p>rat</p> 选择第一个元素<p> var p = d3.select("body&qu…

【 D3.js 选择集与数据详解 — 1 】使用datum()绑定数据

选择集和数据的关系是 D3 最重要的基础,在[入门 - 第 7 章]时进行过些许讲解,对于要掌握好 D3 是远远不够的.故此开设一个新的分类,专门讨论选择集与数据的关系,包括数据绑定的使用和工作原理,update .enter.exit 的原理和使用方法等,接下来一段时间里会有多篇此类文章. D3 最大的特色就是能够将数据绑定到DOM上.使用select或selectAll选择元素之后,被选择的元素上是没有数据的.数据绑定就是使被选择元素里包含有数据.与此相关的函数有两个: datum():将指…