d3的常用方法和数据类型

1. 选择集自身属性

1. selection.empty() 选择集是否为空,为空返回true,否则返回false

2. selection.node() 返回第一个非空元素,无则返回null

3. selection.size() 返回选择集中的元素个数

2. 选择集元素属性

1. attr 设置属性

2. classed 设置class

3. style 设置行内样式

4. property 设置属性,区别于attr,部分属性不能用attr,例如 input的value,复选框的checked等,不会显示在标签上的属性

5. text 设置或获取元素内部的内容,不包括标签,效果同innerText

6. html 设置或获取元素颞部的html,效果同innerHTML

3. 选择集的增删

1. append(name) 追加元素,name为元素名

2. insert(name,[before]) 插入,name为元素名称,before为css选择器

3. remove() 删除元素

选择集遍历、排序、过滤

1. each((d,i) => {}) 遍历

2. filter((d,i) => {}) 过滤

3. sort((a,b) => {}) 排序,同js的array的sort

4. call(func) 对选择集的每一个元素调用func函数

4. d3数组常用操作

1. d3.ascending 升序函数 var nums = [1,5,2]; nums.sort(d3.ascending);

2. d3.descending 降序函数 var nums = [1,2,5]; nums.sort(d3.descending);

3. d3.min 最小值

4. d3.max 最大值

5. d3.extend 最小和最大值

6. d3.sum 求和

7. d3.mean 求平均值

8. d3.range([start,]stop[,step]) 返回范围,等差数列

9. d3.shuffle 洗牌数组

10. d3.merge 合并数组

5. d3的映射

d3的映射,map,就是key-value键值对,形式上与js的map有些区别。

d3.map([object][,key]) 会产生一个映射,其value,就是object的每个项,key是后面指定的key

例如:

var dataset = [
    {id: 1000, color: "red"},
    {id: 1001, color: "green"},
    {id: 1002, color: "blue"}
]

var map = d3.map(dataset, function(d){return d.id});

得到的映射是 key为 id,value为数组的一项,例如 {id: 1000, color: "red"}

映射有一些常用方法

复制代码
map.has(key) 
map.get(key)
map.set(key,value)
map.remove(key)
map.keys()
map.values()
map.entries()
map.each()
map.empty()  //是否为空
map.size()   //映射大小
复制代码

 

posted @   全玉  阅读(1272)  评论(0编辑  收藏  举报
编辑推荐:
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
阅读排行:
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· AI技术革命,工作效率10个最佳AI工具
历史上的今天:
2017-05-27 移动端键盘遮挡问题
2017-05-27 web常见攻击 Sql注入 CSRF,XSS,盗链
2017-05-27 javascript new关键字做了什么
点击右上角即可分享
微信分享提示