js对table元素的操作

js对table元素的操作（通用2篇）

篇1：js对table元素的操作

1 试验部分

1.1 主要原料

采用市场上常见的7个厂家的11个JS涂料样品,具体情况见表1。

1.2 试验仪器与设备

多功能无级调速搅拌器:D-8401型,天津华兴科学仪器厂;测速仪;搅拌工具为桨叶式搅拌杆和上下齿分散盘[6];架盘药物天平:最大称量值1 000 g,分度值1 g;成型样板:玻璃板,35 cm×30 cm;刮尺;电热鼓风干燥箱:DHG-9140A型,上海一恒科学仪器有限公司;恒温恒湿培养箱:HWS-250型,上海森信实验仪器有限公司;玻璃常压干燥器。

1.3 JS涂料的制备

按生产厂家规定的比例称取粉料与乳液,所有产品按表2中所列的条件1和条件2分别进行试样制备,采用刮涂成型。在GB/T 23445—2009标准要求的基础上,增加以下一些固定条件:制样三次涂覆比两次涂覆提前一天、每次间隔24 h,相同类别的产品同期涂覆,相同刮涂次数采用相同的刮尺、相同的涂覆模具和搅拌容器,置于同一干燥器中冷却[7]。

1.4 力学性能测试

参照GB/T 23445—2009标准测定JS涂料的拉伸强度和断裂伸长率。

2 结果与讨论

11个JS涂料样品的拉伸强度和断裂伸长率测试结果见图1—2。由图1和图2可知,制备条件对JS涂料产品的拉伸强度和断裂伸长率的影响较大。由条件1制得的JS涂料样品的拉伸强度均高于由条件2制得的JS涂料样品,其中相差最大的为4号样,达到79.5%;相差最小为7号样,也达到24.5%。条件1和2制得的JS涂料样品的断裂伸长率变化不一,7个样品条件1时的断裂伸长率高于条件2,11号样相差最大,达到54.1%;其余4个样品条件1时的断裂伸长率低于条件2,但相差不大。综合两种制备条件对JS涂料产品拉伸强度和断裂伸长率的影响,由条件1制得的JS涂料样品的物理指标较高。

根据GB/T 23445—2009规定:Ⅰ型JS涂料产品的拉伸强度应≥1.2 MPa,断裂伸长率应≥200%;Ⅱ型JS涂料产品拉伸强度应≥1.8 MPa,断裂伸长率应≥80%。本次试验中,条件1制备的JS涂料样品有10个合格,仅5号样的拉伸强度不合格;而条件2制备的JS涂料样品仅5个合格,其中4、5、6、8、9和10号样的拉伸强度均不合格。说明不同的制备条件严重影响了测试结果的准确性和重现性。

不同制备条件下JS涂料的拉伸强度和断裂伸长率的测试结果变化是由下列因素综合所致:

1)JS原料的影响。不同的乳液与粉料配方对不同制备条件的适应性不同,JS涂料是乳液与粉剂组成的双组分产品,其拉伸强度和断裂伸长率的大小是由粉料、乳液以及乳液与粉料相互作用形成的有机-无机复合网络结构决定的。不同JS涂料产品的粉料、乳液以及由乳液与粉料相互作用形成的有机-无机复合网络结构因工艺和配方的不同,对不同的制备条件表现出不同的适应性,只有乳液与粉剂进行很好地分散包裹,才能形成相互贯穿、牢固粘结成有机-无机网络结构,从而获得最佳的性能。

2)涂膜缺陷的影响。涂膜中的缺陷一般都是气泡造成的,搅拌工具类型、搅拌速度快慢、刮涂次数、称料量以及消泡方法都会影响成型过程中的气泡产生量、在浆料内部的残留量、气泡大小及比例。JS涂料干膜中气泡含量越低、大气泡数量越少,其拉伸强度和断裂伸长率就越大;反之则拉伸强度和断裂伸长率就小。

3)养护过程的影响。水对乳液膜有增塑剂作用[8],水含量高会使JS涂料的拉伸强度降低、断裂伸长率增加,相反则拉伸强度增加、断裂伸长率降低。JS涂料中的水主要来自乳液,这些水一部分会与水泥发生水化反应,另一部分会在成型、养护或烘干过程中挥发,但还会有少量水以结晶水、吸附水或游离水等形态存在于JS涂料的干膜中[1],不同刮涂次数会使每次成型时涂膜的厚度不一致,这会造成水的挥发速度不一致,并且三遍刮涂比两遍刮涂多了24 h成型时间,水的挥发会更多,造成JS涂料干膜的拉伸强度增加、断裂伸长率降低。GB/T 23445—2009规定的标准条件为:温度(23±2)℃,相对湿度(50±10)%,试样成型以及测试都应在这个环境中进行。由于样品比较薄且尺寸小,环境温湿度变化很容易影响JS涂料干膜中的水分含量,导致测试数据出现偏差。

3结论

不同的制备条件会对JS涂料性能测试结果的准确性和重现性产生重要的影响,综合本试验的研究和分析可得出以下结论:采用桨叶式搅拌杆、低速搅拌、富余称料量、3次刮涂次数和低速搅拌消泡方法,JS涂料的物理力学指标测试值较高。

参考文献

[1]李俊,张澜夕,赵晓莺.刮涂次数对聚合物水泥防水涂料性能测试结果的影响[J].中国建筑防水,2011(10):9-11,17.

[2]李建虹,赵晓莺,于秋菊.搅拌设备对聚合物水泥防水涂料性能测试结果的影响[J].中国建筑防水,2011(13):11-15.

[3]檀春丽,陈新红,于秋菊.称料量对JS产品性能测试的影响研究[J].中国建筑防水,2011(1):13-14,23.

[4]周子夏,华卫东,王慧萍.成型方式对聚合物水泥防水涂料物理力学性能的影响[J].中国建筑防水,2011(17):10-11,22.

[5]曲慧,赵营,于秋菊.消泡方法对聚合物水泥防水涂料性能测试的影响[J].中国建筑防水,2011(4):20-22.

[6]华卫东,檀春丽,周子夏,等.拌料工具对聚合物水泥防水涂料物理力学性能影响[C]//防水工程与材料学术论坛文集.北京:中国建筑学会施工与建材分会防水技术专业委员会,2010:224-226.

[7]王慧萍,高巍,赵营,等.玻璃常压干燥器在聚合物水泥防水涂料检测中的应用技巧[J].中国建筑防水,2012(20):34-36.

篇2：对可视化库D3.js的应用研究

D3是缩写, 它的全称是Data-Driven Documents (数据驱动文档) , 是基于数据的文档操作Java Script库。D3能够把数据和HTML、SVG、CSS结合起来, 创造出可交互的数据图表。其中, 数据来源自作者, 文档代表基于Web的文档 (或网页) , 也就是可以在浏览器中展现的一切, 比如, HTML、SVG等, 而D3相当于是扮演了一个驱动程序的角色, 将数据和文档联系起来。

D3.js采用的是链式语法, 非常方便于对库中函数方法的引用。

例如:d3.select ("body") .append ("p") .text ("New") ;//为p元素添加文字内容

数据的可视化可以让数据分析的结果更加直观, 便于发觉隐含内容D3结合功能强大的可视化组件和数据驱动的方法对DOM进行操作, 可以将任意数据绑定到文档对象模型 (DOM) 。支持的数据格式有常见的:txt、html、json、html、xml、csv等。

D3不隐藏你的原始数据。D3代码在客户端执行 (也就是在用户浏览器, 而不是Web服务器中执行) , 因此你想要可视化的数据必须发送到客户端。可视化的目的就是为了更好地表现数据。

D3不是一个整体框架, 旨在提供每一个可以想象的特征。相反, D3解决问题的关键在于:基于数据文件的有效操作。这避免了专有的表示提供了非凡的灵活性, 使Web标准如CSS3的全部功能, HTML5和SVG。以最小的开销、非常快的速度, 支持大型数据集和互动的动态可视化行为。

2 D3可视化特性在电力数据可视化中的应用

2.1 电力机组数据的可视化研究

通过D3.js实现数据的可视化, 可以分为下面几个步骤。

首先是将数据加载到浏览器的内存空间中, 在本文研究的应用实例中就是把时间和频率两组数据电力机组的数据库中接收并加载到浏览器的内存空间中。

例如d3.json ('http://localhost:8888/select Int erval?qs='+start+'&js='+end+'&bm='+table+'&

xvalue='+time+'&yvalue='+value, function (j son) {}) ;

然后把加载的数据绑定到文档中的元素, 并根据需要创建新的元素, 具体到本文实例中也就是将时间和频率两组数据绑定到最终网页显示中的可视化图表结果中, 也就是分别映射到可视化图表的X轴和Y轴, 整个网页中的元素可以分为两类, 一类是可视化图表中的元素, 主要包括X、Y轴及其值域、坐标轴区域网格化显示和可视化图表中折线的属性 (线宽、颜色等) , 这些元素都是为了使最终显示的结果更清晰明了;另一类是参数部分, 主要包括画布宽度、高度 (以像素为单位) , 用来控制数据可视化显示区域的大小, 也包括起始时间、终止时间、表名、画布数据量、X轴字段、Y轴字段等, 用来决定从哪里加载数据、加载哪些数据以及可视化区域中一次显示数据的多少, 还包括Y轴上限和Y轴下限等, 用来控制Y轴的值域区间, 更有助于使数据的可视化展示能更好的反映出数据变化的情况。

2.2 应用结果分析

图1所示是基于D3.js对一电力机组在某一时间区间内的frequency (频率值) 实现数据可视化后的结果截图, 其中横轴是时间, 纵轴是相应的频率值。在实例中通过D3实现对数据的可视化, 清晰的展现出数据的分布情况, 可以方便观察数据, 快捷的辨别出某一时间区间内电力机组的工作频率是否在正常工作的频率范围内。

3 基于D3的数据可视化

本文通过对电力机组工作数据的可视化研究, 比较深入的了解了D3.js的特性、不足和工作机制。根据应用实例研究结果, 可以知道D3是一个很好的数据可视化工具, 它支持多种数据格式, 例如txt、html、json、html、xml、csv等, 同时结合功能强大的可视化组件和数据驱动的方法进行操作, 以最小的开销、非常快的速度, 实现数据可视化的目标。

摘要：D3 (Data-Driven Documents) 是最流行的可视化库之一, 是一个用动态图形显示数据的JavaScript库, 一个数据可视化的工具。通过D3.js实现数据的可视化, 可以分为下面几个步骤。首先是将数据加载到浏览器的内存空间中, 然后把加载的数据绑定到文档中的元素, 并根据需要创建新的元素, 接着解析每个元素的范围资料并为其设置相应的可视化属性, 实现元素的变换, 最后响应用户输入实现元素状态的过渡, 以图形的形式将数据可视化的结果展示在浏览器上。

关键词：D3,数据可视化,DOM

参考文献

[1]Scott Murray著, 李松峰译.数据可视化实战[M].北京:人民邮电出版社, 2013 (06) .

[2]周爱民著.JavaScript语言精髓与实践[M].北京:电子工业出版社, 2012 (03) .