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' ...
随机推荐
- 解决JPA对查询对象set属性值导致数据更新的问题
问题描述 1.开启了数据库事务 2.通过EntityManager执行查询,获得返回对象 3.代码业务逻辑处理,其中有对象set属性值的操作 4.没有执行过JPA的save方法或者update语句 5 ...
- SpringBoot整合SpringSecurity实现前后端分离认证授权
1.什么是SpringSecurity? Spring Security是一个功能强大且高度可定制的身份验证和访问控制框架.它实际上是保护基于spring的应用程序的标准. Spring Securi ...
- 【.NET】控制台应用程序的各种交互玩法
老周是一个不喜欢做界面的码农,所以很多时候能用控制台交互就用控制台交互,既方便又占资源少.有大伙伴可能会说,控制台全靠打字,不好交互.那不一定的,像一些选项类的交互,可以用键盘按键(如方向键),可比用 ...
- django分页器使用
https://docs.djangoproject.com/en/3.2/topics/pagination/ Django 提供了高级和低级方法来帮助您管理分页数据--即,分成多个页面的数据,并带 ...
- 安装华企盾DSC加密软件，USB、银行key等驱动加载不了常见处理方法
1.首先打开高级客户端查看客户端的权限是否正确 2.将USB设置成放行 3.修改USB管控的注册表 4.安装6.6.0高版本,并添加便捷式设备的注册表改为1见下图 5.添加flag000如正常则把相关 ...
- C++ Qt开发：TableView与TreeView组件联动
Qt 是一个跨平台C++图形界面开发库,利用Qt可以快速开发跨平台窗体应用程序,在Qt中我们可以通过拖拽的方式将不同组件放到指定的位置,实现图形化开发极大的方便了开发效率,本章将重点介绍TableVi ...
- 使用C#如何监控选定文件夹中文件的变动情况？
目录 1.前言 2.效果 3.具体实现 页面设计 全部代码 FileSystemWatcher的介绍 FileSystemWatcher的构造函数 FileSystemWatche ...
- Shell的概念、shebang、bash的概念
什么是shell shell的作用是 解释执行用户输入的命令或程序等 用户输入一条命令,shell就解释一条 键盘输入命令,Linux给与响应的方式,称之为交互式 linux的计算机是如何跟用户进行交 ...
- 云MSP技本功|redis的5种对象与8种数据结构之字符串对象（下）
简介: 引言 本文是对<redis设计与实现(第二版)>中数据结构与对象相关内容的整理与说明.本篇文章只对对象结构,1种对象--字符串对象.以及字符串对象所对应的两种编码--raw和emb ...
- libGDX游戏开发之修改游戏帧数FPS（十三）
libGDX游戏开发之修改游戏帧数FPS(十三) libGDX系列,游戏开发有unity3D巴拉巴拉的,为啥还用java开发?因为我是Java程序员emm-国内用libgdx比较少,多数情况需要去官网 ...