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' ...
随机推荐
- 解决/usr/bin/pip: No such file or directory
问题描述: 因为home的空间不足,所以我将anaconda3文件夹移动到了别的位置上了,导致我在命令行中输入python的命令时,显示的是python2.7(也就是linux自带的),后面我又为an ...
- 华企盾防泄密软件关于U盘无法注册问题
1.以管理员权限运行控制台注册 2.如果是非加密注册可在USB拔插日志中右键日志远程注册 3.检查USB的驱动程序注册表是否都有 4.换一台电脑安装控制台注册 5.检查是否有与驱动有关的程序卸载试试 ...
- Sql整理
1:数据库 数据库是以某种有组织的方式存储的数据集合. 保存有组织数据的容器,通常是一个文件或者一组文件. SQL 是Structured Query Language (结构化查询语言)的缩写. 2 ...
- 玩转Python：处理音频文件，两个非常重要的库，很实用，附代码
pyaudio和sounddevice都是用于Python中音频处理和流的库,允许用户通过他们的API录制.播放和处理音频数据.下面是对这两个库的简要介绍: PyAudio PyAudio 提供了 P ...
- 聊聊ChatGLM-6B的源码分析
基于ChatGLM-6B第一版,要注意还有ChatGLM2-6B以及ChatGLM3-6B 转载请备注出处:https://www.cnblogs.com/zhiyong-ITNote/ Prefix ...
- flutter中InheritedWidget共享数据
InheritedWidget是Flutter框架中用于在Widget树中共享数据的机制.它是一个特殊的Widget,可以将其放置在Widget树的上层,并向下传递共享的数据给其子Widget.子Wi ...
- 华为云AI论文精读会2021第一期：高效语义分割模型Fast-SCNN分享
2020年举办的华为云AI经典论文复现活动,不仅受到了参赛者们一致好评,也产出了许多优质的算法成果.这些论文复现的算法描述.源代码以及算法使用指导文档均已发布到了AI Gallery.为了让开发者更好 ...
- MySQL 数据库救火：磁盘爆满了，怎么办？
摘要:当磁盘空间爆满后,MySQL会发生什么事呢?又应该怎么应对? 本文分享自华为云社区<[MySQL 数据库救火]- 磁盘突然爆满的处理方式>,原文作者:技术火炬手 . 大多数用户在对于 ...
- Cmder - 想让你的windows下 cmd 和 SecureCRT 操作 Linux 一样帅吗 附字符集编码 chcp 936、chcp 65001
想让你的windows下 cmd 和 SecureCRT 操作 Linux 一样帅的命令行显示吗. 下载 cmder 绿色版,然后用我的配置文件,替换原来的文件启动就可以了 配置文件下载:cmder ...
- 注册中心 —— SpringCloud Netflix Eureka
Eureka 简介 Eureka 是一个基于 REST 的服务发现组件,SpringCloud 将它集成在其子项目 spring-cloud-netflix 中,以实现 SpringCloud 的服务 ...