d3 获取当前选择集绑定的数据、

2024-08-01

d3.js:数据可视化利器之 selection：选择集

选择集/selection 选择集/selection是d3中的核心对象,用来封装一组从当前HTML文档中选中的元素: d3提供了两个方法用来创建selection对象: select(selector) : 只使用第一个匹配的元素创建选择集. selectAll(selector) : 使用全部匹配的元素创建选择集. select:选中单个元素 select()方法用来创建最多只包含一个DOM元素的选择集.如果当前文档中没有匹配的元素,则建立一个空选择集:如果当前文档中有多个匹配的元素, 也

【 D3.js 选择集与数据详解 — 1 】使用datum()绑定数据

选择集和数据的关系是 D3 最重要的基础,在[入门 - 第 7 章]时进行过些许讲解,对于要掌握好 D3 是远远不够的.故此开设一个新的分类,专门讨论选择集与数据的关系,包括数据绑定的使用和工作原理,update .enter.exit 的原理和使用方法等,接下来一段时间里会有多篇此类文章. D3 最大的特色就是能够将数据绑定到DOM上.使用select或selectAll选择元素之后,被选择的元素上是没有数据的.数据绑定就是使被选择元素里包含有数据.与此相关的函数有两个: datum():将指

【 D3.js 选择集与数据详解 — 3 】绑定数据的顺序

data() 函数有两个参数,第一个是被绑定数据,第二个参数用于指定绑定的顺序.在数据需要更新的时候常常会用到. 默认的情况下,data()函数是按照索引号依次绑定数组各项的.第0个元素绑定数组的第0项,第1个元素绑定数组的第1项,依此类推.也可以不按照此顺序进行绑定,这就要用到data()的第二个参数.这个参数是一个函数,称为键函数(key function). 要注意,只有在选择集原来已经绑定有数据的情况下,才能使用键函数指定绑定的顺序.请看以下代码: <body> <!-- 三个空

【 D3.js 选择集与数据详解 — 2 】使用data()绑定数据

D3 中绑定数据大多是由 data() 函数来完成的,它是怎样工作的,它与 datum() 有什么区别呢? data()函数能够将数组各项分别绑定到各元素上,而且能够设置绑定的规则.data()还能够处理数组长度与元素数量不一致的情况.当数组长度大于元素数量,能为多余数据预留元素位置,以便将来插入新元素:当数组长度小于元素数量时,能提供指向多余元素的方法,以便将来删除.下面来剖析data()是如何绑定数据的,相比datum()有哪些新功能. data()的工作过程假设body中有三个段落元素p

【 D3.js 选择集与数据详解 — 5 】处理模板的应用

在[选择集与数据 - 4]一文中,介绍了一个update.enter.exit的处理模板,这个模板很常用,本文将通过一个例子来讲解其使用方法. 1. 模板复习一下上一章提到的模板. //绑定数据后,分别返回update.enter.exit部分 var update = selection.data(dataset); var enter = update.enter(); var exit = update.exit(); //1.update部分的处理方法 update.text( fun

【 D3.js 选择集与数据详解 — 4 】 enter和exit的处理方法以及处理模板

绑定数据之后,选择集分为三部分:update.enter.exit.这三部分的处理办法是什么呢?本文将讲解其处理方法,以及一个常用的处理模板. 1. enter的处理方法如果没有足够的元素,那么处理方法通常是使用append()添加元素.请看下面的代码: <body> <p></p> <script> var dataset = [3, 6, 9]; var p = d3.select("body").selectAll("p

D3.js的基础部分之选择集的处理过滤器、选择集的顺序、each()和call()的应用(v3版本)

选择集的处理 : 过滤器有时候需要根据绑定数据对某选择集的元素进行过滤,例如某公司,只对id大于100的员工进行奖励.某学校只选拔身高超过170cm的学生等.类似这样的问题,需要根据条件获取选择集的一部分子集,该方法成为过滤器. render() { return ( <div id="body" > </div> ); } // 定义数组,然后过滤到小于20的数,只选取大于20的数 var dataList = [10, 20, 30, 40, 50, 60

D3.js的基础部分之选择集的处理 enter和exit的处理方法 (v3版本)

上一节给大家讲述额绑定数据的原理.当数组的长度与元素的数量不一致时,有enter部分和exit部分,前者表示存在多余的数据,后者表示存在多余的元素.本节将给大家介绍如何处理这些多余的东西,最后会给大家讲解一个处理模板,此模板包含处理enter.exit.update部分的内容. enter的处理方法 : 如果没有足够的元素,那么处理方法就是添加元素.请看代码 : render() { return ( <div id="body" > <p></p>

如何获取jqGrid中选择的行的数据

原文地址:http://hi.baidu.com/feifan3211/item/c5831f44158761a5df2a9fc1 如何获取jqGrid中选择的行的数据? 下面可以获取选择一行的id,如果你选择多行,那下面的id是最后选择的行的id: var id=$(‘#gridTable’).jqGrid(‘getGridParam’,'selrow’); 如果想要获取选择多行的id,那这些id便封装成一个id数组,那可以使用以下: var ids=$(‘#gridTable’).jqGri

jquery easyui datagrid 获取Checked选择行(勾选行)数据

原文:jquery easyui datagrid 获取Checked选择行(勾选行)数据 getSelected:取得第一个选中行数据,如果没有选中行,则返回 null,否则返回记录. getSelections:取得所有选中行数据,返回元素记录的数组数据. getChecked:取得checkbox选择行的数据,返回元素记录的数组数据. getSelected跟getSelections是选中行,而且getChecked是选择行. 选中行的意思就是,我们单击到某一个行,这个时候该行的背景色为

获取jqGrid中选择的行的数据以及 jqGrid获得所有行数据的方法

获取jqGrid中选择的行的数据: 获取选择一行的id,如果你选择多行,那下面的id是最后选择的行的id: 1 var id=$('#gridTable').jqGrid('getGridParam','selrow'); 如果想要获取选择多行的id,那这些id便封装成一个id数组,那可以使用以下: 1 varids=$('#gridTable').jqGrid('getGridParam','selarrrow'); 如果想获取选择的行的数据,只要传入rowId即可,如下: 1 v

获取jqGrid中选择的行的数据

下面可以获取选择一行的id,如果你选择多行,那下面的id是最后选择的行的id: var id=$(‘#gridTable’).jqGrid(‘getGridParam’,'selrow’); 如果想要获取选择多行的id,那这些id便封装成一个id数组,那可以使用以下: var ids=$(‘#gridTable’).jqGrid(‘getGridParam’,'selarrrow’); 如果想获取选择的行的数据,只要传入rowId即可,如下: var rowData = $(“#gridTabl

D3.js 其他选择元素方法

在上一节中,已经讲解了 select 和 selectAll,以及选择集的概念.本节具体讲解这两个函数的用法. 假设在 body 中有三个段落元素: <p>Apple</p> <p>Pear</p> <p>Banana</p> 现在,要分别完成以下四种选择元素的任务. 一.选择第一个 p 元素使用 select ,参数传入 p 即可,如此返回的是第一个 p 元素. var bodys = d3.select("body&q

本地日志数据实时接入到hadoop集群的数据接入方案

1. 概述本手册主要介绍了,一个将传统数据接入到Hadoop集群的数据接入方案和实施方法.供数据接入和集群运维人员参考. 1.1. 整体方案 Flume作为日志收集工具,监控一个文件目录或者一个文件,当有新数据加入时,收集新数据发送给Kafka.Kafka用来做数据缓存和消息订阅.Kafka里面的消息可以定时落地到HDFS上,也可以用Spark Streaming来做实时处理,然后将处理后的数据落地到HDFS上. 1.2. 数据接入流程本数据接入方案,分为以下几个步骤: l 安装部署Flu

winform快速开发平台 -> 快速绑定ComboBox数据控件

通常我们在处理编辑窗体时.往往会遇到数据绑定.例如combobox控件绑定数据字典可能是我们经常用到的.然而在我的winform快速开发平台中我是如何处理这个频繁的操作呢? 首先,我们要绑定combobox动态数据,大致都是来自于数据字典的数据绑定,那么思路来了,我们需要绑定的是通过获取字典属性来绑定ComboBox控件.大家都知道ComboBox控件中存在显示数据,和值数据对数据值进行绑定. 那么此时我们需要定义一个实体类: /// <summary> /// ComboBoxModel数据

背水一战 Windows 10 (20) - 绑定: DataContextChanged, UpdateSourceTrigger, 对绑定的数据做自定义转换

[源码下载] 背水一战 Windows 10 (20) - 绑定: DataContextChanged, UpdateSourceTrigger, 对绑定的数据做自定义转换作者:webabcd 介绍背水一战 Windows 10 之绑定 DataContextChanged - FrameworkElement 的 DataContext 发生变化时触发的事件 UpdateSourceTrigger - 数据更新的触发方式对绑定的数据做自定义转换示例1.演示 DataContextCh

【Visual Lisp】图元选择集专题

图元选择集专题;;★★★01.选择集操作★★★(setq ss (ssadd));;创建一个空选择集(ssadd (car(entsel)) ss);;将点取的图元添加到ss选择集中,可以不用setq语句图元便加入ss所指向的选择集(ssdel en1 ss);;将en1图元从ss中删除(ssmemb (car (entsel)) ss);;测试图元名所表示的对象是否在选择集中,在则返回图元名,否则返回nil(ssname ss 0);;根据索引获取选择集中的图元名.使用repeat或者whil

jqGrid中选择的行的数据[转]

如何获取jqGrid中选择的行的数据? 下面可以获取选择一行的id,如果你选择多行,那下面的id是最后选择的行的id: var id=$(‘#gridTable’).jqGrid(‘getGridParam’,'selrow’); 如果想要获取选择多行的id,那这些id便封装成一个id数组,那可以使用以下: var ids=$(‘#gridTable’).jqGrid(‘getGridParam’,'selarrrow’); 如果想获取选择的行的数据,只要传入rowId即可,如下: var ro

Dev GridView 获取选中分组下的所有数据行 z

现在要在DevExpress 的GridView 中实现这样一个功能.就是判断当前的选中行是否是分组行,如果是的话就要获取该分组下的所有数据信息. 如下图(当选中红框中的分组行事.程序要获取该分组下的所有数据) 实现代码如下: List<int> _gridViewRowIndexs = new List<int>(); //存储GridView 中选中的行索引 private void Test() { int[] rows = gridView1.GetSelectedRows

jquery easyui tree绑定静态数据的方法

若是动态,返回的是json格式,这个比较常见,就不列举说明了,如果要绑定的数据为静态,很简单,只需将ajax的url改为data 如 //鼠标单击树事件 $("#tree").tree({ url: TY.Root + 'System/GetMenuTree',//动态获取,若要静态得到, data: [{ "ID": "1", "text": "应用设备", "children": [

d3 获取当前选择集绑定的数据、

热门专题