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' ...
随机推荐
- 【软件安装】vmware虚拟机安装完整教程(15.5版本)
目录 一.基础介绍 二.准备工作(注意:如果自己下载不下来翻到最下面获取下载地址) 三.VMware下载与安装 VMware Workstation15.5新功能 注意: 一.基础介绍 VMware ...
- Mybatis|MybatisPlus批量插入
创建一个SpringBoot工程 <?xml version="1.0" encoding="UTF-8"?> <project xmlns= ...
- Kernel Memory 入门系列：快速开始
Kernel Memory 入门:Quick Start 了解了用户问答和文档预处理的流程之后,我们就可以直接开始使用Kernel Memory了. 1. 安装 项目中只需要通过NuGet安装Micr ...
- 从零玩转Websocket实时通讯服务之前后端分离版本
前言 公司项目需要用到消息提示,那么WebSocket它来了经过我面向百度的学习,废话不多说直接开干. 后端搭建 一.依赖导入 <dependency> <groupId>or ...
- Spring Boot整合Spring Data连接postgreSQL完成简单的CRUD操作
导入jpa依赖和postgresql依赖: <!-- jpa依赖 --> <dependency> <groupId>org.springframework.boo ...
- 文心一言 VS 讯飞星火 VS chatgpt （63）-- 算法导论6.5 2题
文心一言 VS 讯飞星火 VS chatgpt (63)-- 算法导论6.5 2题 二.试说明 MAX-HEAP-INSERT(A,10)在堆A=(15,13,9,5,12,8,7,4,0,6,2,1 ...
- 共探AI大模型时代下的挑战与机遇，华为云HCDE与大模型专家面对面
摘要:近日,华为开发者大会2023(cloud)"开发者生态创新发展圆桌会议"在东莞华为溪流背坡村成功举办. 2023年7月8日,华为开发者大会2023(cloud)"开 ...
- 华为云·云享专家李万龙： IoT 梦想，从0到1的实现
摘要:掀翻35岁IT人退役魔咒,站在巨人肩膀上,应用新技术,结合经验,整体方案优势,让IoT快速生花,这就是李万龙的最新感悟. 随着过去几年传感器和终端设备长足的发展,加上通讯连接在带宽和速度上的大幅 ...
- 云图说：云数据库 RDS for MySQL一键开通读写分离，轻松应对业务高峰期
摘要:华为云数据库 RDS for MySQL提供一键开通读写分离功能,只需要一个连接地址,让您在业务高峰期不再迷茫,不再慌乱,so easy 的应对业务. 本文分享自华为云社区<云图说 | 第 ...
- CANN AICPU算子耗时分析及优化探索
摘要:本文以GreaterEqual作为测试算子,该算子计算逻辑较为简单(output = input1 >= input2),旨在尽可能降低计算耗时,使得算子耗时尽可能以数据操作和算子调度作为 ...