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. 【UniApp】-uni-app-OptionAPI应用生命周期和页面生命周期

    前言 好,经过上个章节的介绍完毕之后,了解了一下 uni-app-修改组件主题和样式 那么了解完了uni-app-修改组件主题和样式之后,这篇文章来给大家介绍一下 uni-app-OptionAPI应 ...

  2. Excel对比两张表的某一列，匹配上则进行数据copy

    VLOOKUP(参数1,参数2,参数3,参数4) 参数1: 查找值 参数2:指定查找数据源的范围 参数3:返回查找区域的第几列数据 参数4:精确查找输入参数"0"or"f ...

  3. 使用Py2neo更新Neo4j中节点的属性值的正确姿势

    1 def findNode(name, graph): 2 matcher = NodeMatcher(graph) 3 m = matcher.match(name = name).first() ...

  4. Python趣味入门10:推倒繁琐化烦为简的推导式

    前言 <西部世界>的德洛丽丝进入了MAZE迷宫,假设她需要列出一系列的平方数作为密码,来进入迷宫.在以往的代码生成类似的数列需要使用循环语句,写多行语句.Python有了推导式,只需要1句 ...

  5. postman——token传参

    问题描述: 有一个登陆接口获取token,其他接口再次访问都要带上token 解决方案: 1.在登陆接口访问后设置Postman的环境变量(Environment),例如设置环境变量名:token,值 ...

  6. Ubuntu图形界面root登录“sorry, that didn't work please

    https://blog.51cto.com/u_14757092/2484490 ssh登录主机执行下vim /etc/pam.d/gdm-autologin 注释行 "auth requ ...

  7. CSS3学习笔记-字体属性

    在CSS3中,可以使用字体属性来控制网页中文本的样式和排版.以下是常用的字体属性: font-family 该属性用于指定网页中的文本所使用的字体.我们可以通过使用通用的字体名称,或者直接使用字体名称 ...

  8. Ynoi

    P4688 [Ynoi2016] 掉进兔子洞 序列,静态,求三个区间的可重集的交的大小,离线,\(n,Q\le 10^5\),3s,500MB 缺乏性质 \(\rightarrow\) bitset ...

  9. flutter中InheritedWidget共享数据

    InheritedWidget是Flutter框架中用于在Widget树中共享数据的机制.它是一个特殊的Widget,可以将其放置在Widget树的上层,并向下传递共享的数据给其子Widget.子Wi ...

  10. Python图像处理丨图像的灰度线性变换

    摘要:本文主要讲解灰度线性变换. 本文分享自华为云社区<[Python图像处理] 十五.图像的灰度线性变换>,作者:eastmount. 一.图像灰度线性变换原理 图像的灰度线性变换是通过 ...