d3过滤
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过滤的更多相关文章
- Windows网络驱动、NDIS驱动(微端口驱动、中间层驱动、协议驱动)、TDI驱动(网络传输层过滤)、WFP(Windows Filtering Platform)
catalog . 引言 . Windows 2000网络结构和OSI模型 . NDIS驱动 . NDIS微端口驱动编程实例 . NDIS中间层驱动编程实例 . NDIS协议层驱动编程实例 . TDI ...
- 【转载】协同过滤 & Spark机器学习实战
因为协同过滤内容比较多,就新开一篇文章啦~~ 聚类和线性回归的实战,可以看:http://www.cnblogs.com/charlesblc/p/6159187.html 协同过滤实战,仍然参考:h ...
- PHP批量过滤MYSQL数据库内站外链接和图片
因发现站内很多引用站外文章的链接失效,产生大量的死链接,对于搜索引擎来说是极不友好的,很不利于网站优化,所以站内添加了站外链接过滤功能,对于新加的文章,在添加入库时就自动增加rel="nof ...
- d3 之deal with data
之前说慢慢写有关D3的笔记,结果做完那个拓扑图就没写了,今天发现关于d3的用法有点遗忘.感觉有回顾一遍的必要. 之前的序对D3有一个简单的介绍,下面就做一些细节的东西.主要是贴代码,顺带注释和效果图. ...
- 【 D3.js 高级系列 — 2.0 】 捆图
捆图(Bundle)是 D3 中比较奇特的一个布局,只有两个函数,而且需要与其它布局配合使用.本文讲述捆图的制作方法. 有关捆图的例子极少,很容易找到的是:http://bl.ocks.org/mbo ...
- D3、openlayers的一次尝试
近期尝试了一个webgl相关的内容,有些小激动,及时分享一下我的测试示例,效果如下: 此示例分从业务角度分为两部分,一个部分为d3展示的柱图,另一部分则为用openlayers展示的地图.而其难点却在 ...
- (6)Jquery1.8.3快速入门_过滤选择器
一.Jquery的基本过滤选择器: 基本过滤选择器: 1. :first 选取第一个元素 2. :last 选取最后一个元素 3.:not(selector) 去除所有与给定的选择器匹配的元素 4.: ...
- D3.js的基础部分之选择集的处理 过滤器、选择集的顺序、each()和call()的应用(v3版本)
选择集的处理 : 过滤器 有时候需要根据绑定数据对某选择集的元素进行过滤,例如某公司,只对id大于100的员工进行奖励.某学校只选拔身高超过170cm的学生等.类似这样的问题,需要根据条件获取选择集的 ...
- D3、EChart、HighChart绘图demol
1.echarts: <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...
- model.object对象查询过滤、增删改、Q
vm.objects.all()[:10] #获得前10个对象,不支持负索引 vm.objects.get(name='vmname') vm.objects.filter(name='vmname' ...
随机推荐
- STA分析-复制
1 静态时序分析(Static Timing Analysis)静态时序分析(Static Timing Analysis):静态执行对于数字设计时序的分析,不依赖于施加在输入端口上的激励,验证设计是 ...
- 一篇文章带你掌握性能测试工具——Jmeter
一篇文章带你掌握性能测试工具--Jmeter 在目前的中大型企业中,仅仅进行功能测试已经不足以满足企业的需求,在重大客户基数下性能测试将会直接影响到用户体验 所以在这篇文章中我们将会学习性能测试的相关 ...
- Mybatis大于、小于....转义写法
描述 转义前 转义后 大于 > > 大于等于 >= >= 小于 < < 小于等于 <= <= 和 & & 单引号 ' &apos ...
- k8s安装网络插件calico出现error validating "calico.yaml": error validating data: invalid object to validate; if you choose to ignore these errors, turn validation off with --validate=false
解决办法:使用下面版本的calico curl https://docs.projectcalico.org/v3.20/manifests/calico.yaml -O
- 流畅的orm让我发现我抵触的是mybatis而不是java
流畅的orm让我发现我抵触的是mybatis而不是java 背景介绍 开发.net 也快10年了,到第三年的时候我已经渐渐瓶颈了,于是我在网上找各种资料但是大部分c#资料全是皮毛资料,稍微深一点点就再 ...
- 部署堡垒机3——编译安装redis-6.2.1以上版本
一.环境准备 Redis官网:https://redis.io/download/ 历史版本:http://download.redis.io/releases/ 1.安装依赖 yum -y in ...
- 【scikit-learn基础】--『监督学习』之 决策树分类
决策树分类算法是一种监督学习算法,它的基本原理是将数据集通过一系列的问题进行拆分,这些问题被视为决策树的叶子节点和内部节点.决策树的每个分支代表一个可能的决策结果,而每个叶子节点代表一个最终的分类结果 ...
- 面试官：禁用Cookie后Session还能用吗？
Cookie 和 Session 是 Web 应用程序中用于保持用户状态的两种常见机制,它们之间既有联系也有区别. Cookie 是由服务器在 HTTP 响应中发送给客户端(通常是浏览器)的一小段数据 ...
- macOS 安装 clang-tidy
先安装 homebrew,网上教程很多,推荐官方教程,此处略过 通过 brew 安装 llvm brew install llvm 创建软连接,指向 homebrew 安装的 clang-tidy m ...
- 占位图片（Placeholder Image）
一.引言 在网页设计和开发中,占位图片(Placeholder Image)是一种常见的技术手段,用于在用户上传图片之前或者图片加载失败时,展示一个临时替代的图片,以提高用户体验.本文将详细介绍占位图 ...