1 <!DOCTYPE html>

 2 <html lang="en">

 3 <head>

 4     <meta charset="UTF-8">

 5     <title>过滤</title>

 6     <script src="d3.js"></script>

 7 </head>

 8 <style>

 9 .h-bar {

10     min-height: 15px;

11     min-width: 10px;

12     background-color: steelblue;

13     margin-bottom: 2px;

14     font-size: 11px;

15     color: #f0f8ff;

16     text-align: right;

17     padding-right: 2px;

18 }

19 .selected{

20     background-color: pink;

21 }

22 </style>

23

24 <body>

25     <script>

26       // 定义数据

27       let data = [

28         { expense: 10, category: "Retail" },

29         { expense: 15, category: "Gas" },

30         { expense: 30, category: "Retail" },

31         { expense: 50, category: "Dining" },

32         { expense: 80, category: "Gas" },

33         { expense: 65, category: "Retail" },

34         { expense: 55, category: "Gas" },

35         { expense: 30, category: "Dining" },

36         { expense: 20, category: "Retail" },

37         { expense: 10, category: "Dining" },

38         { expense: 8, category: "Gas" }

39       ]

40       function render(data, category) {

41         // 进入

42         d3.select("body").selectAll('div.h-bar')

43           .data(data)

44           .enter()

45           .append("div")

46           .attr('class', 'h-bar')

47           .append('span')

48         // 退出

49         d3.select("body").selectAll('div.h-bar')

50           .data(data)

51           .exit()

52           .remove()

53         // 更新

54         d3.select("body").selectAll('div.h-bar')

55           .data(data)

56           .attr("class", "h-bar")  //为了初始化下样式

57           .style('width', function(d) {

58             return (d.expense*5) + 'px'

59           })

60           .select("span")

61           .text(function(d) {

62               return d.category;

63           });

64

65         d3.select("body").selectAll('div.h-bar')

66           .filter(function(d, i) {

67             return d.category == category

68           })

69           .classed("selected", true)

70       }

71

72       render(data);

73       function select(category){

74         render(data, category);

75       }

76     </script>

77     <div>

78         <button onclick="select('Retail')">Retail</button>

79         <button onclick="select('Gas')">Gas</button>

80         <button onclick="select('Dining')">Dining</button>

81         <button onclick="select()">Clear</button>

82     </div>

83 </body>

84

85 </html>

d3过滤的更多相关文章

  1. Windows网络驱动、NDIS驱动(微端口驱动、中间层驱动、协议驱动)、TDI驱动(网络传输层过滤)、WFP(Windows Filtering Platform)

    catalog . 引言 . Windows 2000网络结构和OSI模型 . NDIS驱动 . NDIS微端口驱动编程实例 . NDIS中间层驱动编程实例 . NDIS协议层驱动编程实例 . TDI ...

  2. 【转载】协同过滤 & Spark机器学习实战

    因为协同过滤内容比较多,就新开一篇文章啦~~ 聚类和线性回归的实战,可以看:http://www.cnblogs.com/charlesblc/p/6159187.html 协同过滤实战,仍然参考:h ...

  3. PHP批量过滤MYSQL数据库内站外链接和图片

    因发现站内很多引用站外文章的链接失效,产生大量的死链接,对于搜索引擎来说是极不友好的,很不利于网站优化,所以站内添加了站外链接过滤功能,对于新加的文章,在添加入库时就自动增加rel="nof ...

  4. d3 之deal with data

    之前说慢慢写有关D3的笔记,结果做完那个拓扑图就没写了,今天发现关于d3的用法有点遗忘.感觉有回顾一遍的必要. 之前的序对D3有一个简单的介绍,下面就做一些细节的东西.主要是贴代码,顺带注释和效果图. ...

  5. 【 D3.js 高级系列 — 2.0 】 捆图

    捆图(Bundle)是 D3 中比较奇特的一个布局,只有两个函数,而且需要与其它布局配合使用.本文讲述捆图的制作方法. 有关捆图的例子极少,很容易找到的是:http://bl.ocks.org/mbo ...

  6. D3、openlayers的一次尝试

    近期尝试了一个webgl相关的内容,有些小激动,及时分享一下我的测试示例,效果如下: 此示例分从业务角度分为两部分,一个部分为d3展示的柱图,另一部分则为用openlayers展示的地图.而其难点却在 ...

  7. (6)Jquery1.8.3快速入门_过滤选择器

    一.Jquery的基本过滤选择器: 基本过滤选择器: 1. :first 选取第一个元素 2. :last 选取最后一个元素 3.:not(selector) 去除所有与给定的选择器匹配的元素 4.: ...

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

    选择集的处理 : 过滤器 有时候需要根据绑定数据对某选择集的元素进行过滤,例如某公司,只对id大于100的员工进行奖励.某学校只选拔身高超过170cm的学生等.类似这样的问题,需要根据条件获取选择集的 ...

  9. D3、EChart、HighChart绘图demol

    1.echarts:   <!DOCTYPE html>   <html>   <head>   <meta charset="utf-8" ...

  10. model.object对象查询过滤、增删改、Q

    vm.objects.all()[:10] #获得前10个对象,不支持负索引 vm.objects.get(name='vmname') vm.objects.filter(name='vmname' ...

随机推荐

  1. 通信技术 Communication

    缩写 全称 翻译 备注 I2C Inter-Integrated Circuit 集成电路总线 通信协议 SPI Serial Peripheral Interface 串行外设接口 通信协议 QSP ...

  2. KR4-KP4

    serdes测试中经常遇到KR4 和KP4, KR4指的是FEC 528 514对应25X4的100G KP4对应FEC 544 514,56/100x4 的200/400G链路 KP4应用比较广泛, ...

  3. Linux笔记03: Linux常用命令_3.3文件操作命令

    3.3 文件操作命令 3.3.1 stat命令 ●命令名称:stat. ●英文原意:display file or file system status. ●所在路径:/usr/bin/stat. ● ...

  4. 2023-12-16：用go语言，给定整数数组arr，求删除任一元素后， 新数组中长度为k的子数组累加和的最大值。 来自字节。

    2023-12-16:用go语言,给定整数数组arr,求删除任一元素后, 新数组中长度为k的子数组累加和的最大值. 来自字节. 答案2023-12-16: 来自左程云. 灵捷3.5 大体步骤如下: 算 ...

  5. Vite4+Typescript+Vue3+Pinia 从零搭建(7) - request封装

    项目代码同步至码云 weiz-vue3-template 基于 axios 封装请求,支持多域名请求地址 安装 npm i axios 封装 utils 目录下新建 request 文件夹,并新建 i ...

  6. MinIO客户端之license

    MinIO提供了一个命令行程序mc用于协助用户完成日常的维护.管理类工作. 官方资料 mc license mc license info mc license register mc license ...

  7. 工作中常用的一些Linux指令,简单易记还实用（三）

    成功路上最大的困难就是坚持,每天坚持看一道算法,每周坚持看一本好书! 工作中,离不开Linux系统,很多刚步入职场的小白,往往对于Linux操作系统的使用都显得生疏,最主要的就是对一些常用的指令记忆不 ...

  8. 2022年发布jar到Maven公共仓库最全攻略

    2022年jar包发布到Maven公共仓库最全攻略 分几个步骤: 1.注册 issues.sonatype.org 账号 2.创建 issues 填写项目地址(github.gitee等) 3.验证域 ...

  9. CSS3学习笔记引言

    开始我们要来介绍css: CSS(全称为Cascading Style Sheets)是一种用于描述HTML.XML等文档样式的样式语言,它能够定义元素的显示方式,如字体.颜色.布局等. CSS可以把 ...

  10. 【scikit-learn基础】--『监督学习』之 随机森林分类

    随机森林分类算法是一种基于集成学习(ensemble learning)的机器学习算法,它的基本原理是通过对多个决策树的预测结果进行平均或投票,以产生最终的分类结果. 随机森林算法可用于回归和分类问题 ...