`
wuxi7227
  • 浏览: 1603 次
  • 性别: Icon_minigender_1
  • 来自: 上海
文章分类
社区版块
存档分类
最新评论

D3 selection对象扩展

阅读更多
D3是一个非常好的大数据前台展示技术。工作中把EXTJS和D3JS一起用,在用D3 selection对象的attr方法设置SVG的rect的ext:qtip时出了一点小问题。D3会检查attribute的名称里面有没有包含冒号,有的话会把冒号前的作为namespace另行处理。这样造成的效果就是页面只有qtip属性,EXT不认识。为达到设置ext:qtip的目的,我扩展了D3的selection对象。具体代码如下:


	function d3_selection_qtip(value){
			var name = "ext:qtip";
			function attrNull() {
		      this.removeAttribute(name);
		    }
		    function attrConstant() {
		      this.setAttribute(name, value);
		    }				 
		    function attrFunction() {
		      var x = value.apply(this, arguments);
		      if (x == null) this.removeAttribute(name); else this.setAttribute(name, x);
		    }			  
		    return value == null ?  attrNull : typeof value === "function" ?  attrFunction :  attrConstant;	
		}
		
		d3.selection.prototype.qtip = function(value) {
			if(Ext!="undefined"){
				return this.each(d3_selection_qtip(value));
			}else{
				//do nothing if no Ext.
			}			
		};


转载请务必指出原出本博客。
分享到:
评论

相关推荐

    前端项目-d3-selection.zip

    在前端开发领域,D3.js(Data-Driven Documents)是一个非常强大的JavaScript库,它允许开发者用数据来操作文档对象模型(DOM)。这个“前端项目-d3-selection.zip”压缩包文件显然是一个专注于D3库中“d3-selection...

    d3jsExtended扩展D3包含一些常见的jQuery函数

    《深入理解d3.js Extended:扩展D3与jQuery的融合应用》 在现代Web开发中,数据可视化已经成为不可或缺的一部分,而d3.js作为一款强大的数据驱动文档库,深受开发者喜爱。它允许开发者利用SVG、Canvas或HTML来创建...

    CA-Base-D3D-Menu-Selection.rar_d3d_d3d menu

    【标题】"CA-Base-D3D-Menu-Selection.rar_d3d_d3d menu" 指的是一款针对Counter-Strike(简称CS)游戏的D3D菜单选择系统。这个压缩包包含了开发者用于增强CS游戏用户体验的D3D图形界面菜单。 【描述】"Menu D3D BR...

    d3d8应用程序扩展

    1. 设备(Device):这是Direct3D的核心对象,负责与硬件交互,处理渲染任务。有两种主要的设备类型,即软件设备和硬件设备。软件设备完全由CPU执行3D图形运算,而硬件设备则利用显卡的GPU来加速图形处理。 2. 顶点...

    CUDA与D3D的互操作

    5. **初始化D3D**: 创建D3D对象,确定主显示器标识(adapterId),然后使用该标识设置CUDA使用的GPU。这一步确保CUDA和D3D使用相同的GPU进行互操作。 6. **初始化D3D设备**: 创建D3D设备,设置图形状态,如光照和...

    自己写的D3d面向对象框架

    D3D面向对象框架的核心目标是提供一种结构化和模块化的开发方式,以便于代码的组织、维护和扩展。这样的框架通常包括以下几个关键组件: 1. 设备管理:负责初始化Direct3D设备,设置渲染目标,处理设备丢失和恢复等...

    d3dx9 d3dx10 的各个版本,比如d3dx9_25

    d3dx9 d3dx10 的各个版本,游戏不能启动时,一定要下载这个 d3dx9_25 d3dx9_26 d3dx9_27 d3dx9_28 d3dx9_29 d3dx9_30 d3dx9_31 d3dx9_32 d3dx9_33 d3dx9_34 d3dx9_35 d3dx9_36 d3dx9_37 d3dx9_38 d3dx9_39 d3dx9_40 ...

    D3思维导图案例+二叉树数据转json数组

    在服务端,这种数据结构通常以对象的形式存在,如: ```json { "data": "父节点", "left": { "data": "左子节点", "left": null, "right": null }, "right": { "data": "右子节点", "left": null, "right...

    D3.js中文版api-接口文档

    - **selection.enter**: 返回缺失元素的占位对象,指向绑定的数据中比选定元素集多出的部分。 - **selection.exit**: 返回多余元素的集合,即选择元素中比绑定数据多出的部分。这一机制常用于更新数据变化后的视图。...

    流程图_dagre-d3流程图_dagre-d3_DEMO_

    而dagre-d3是D3.js的一个扩展,它为D3提供了一个布局引擎,专门用于处理有向图。dagre-d3的核心功能包括自动布局,它能够计算出节点之间的最佳位置,使得整个图看起来整洁有序。这在描绘复杂的流程或依赖关系时尤其...

    d3.min.js d3.js

    这个库由Mike Bostock创建,其核心理念是让开发者能够直接操作DOM(文档对象模型)来绑定数据,并根据数据的变化自动更新视图。D3.js 的两个主要文件,`d3.min.js`和`d3.js`,都是实现这一功能的关键。 `d3.min.js`...

    d3面包圈例子

    例如,它可能使用`d3.json()`加载数据,然后用`d3.pie()`和`d3.arc()`函数来计算饼图的扇区和形状,最后用`selection.data().enter().append()`等方法创建并更新SVG元素。 此外,由于提到了“拓扑结构的层级关系”...

    d3threejs使用D3和THREEjs实现的CSS3D变换

    《D3与THREE.js结合实现CSS3D变换详解》 在现代Web开发中,数据可视化扮演着至关重要的角色,而D3...这不仅扩展了D3的可视化能力,也为开发者提供了更丰富的表达手段,使他们能够以全新的视角展示数据,提升用户体验。

    d3-relationshipgraph, 使用d3js可视化父对象关系的框架.zip

    d3-relationshipgraph, 使用d3js可视化父对象关系的框架 d3-relationshipgraph 用于创建 D3.js的父级子关系的框架。示例在这里查看一个工作示例 。如果你已经使用 d3-relationshipgraph,可以编辑这个自述文件并为你...

    D3.js中文版api-接口文档..pdf

    1. selection对象:D3.js中的selection对象是对DOM元素的选择和操作。它提供了许多有用的方法来设置、获取和操作元素的属性、样式、内容等。 * d3.select:从当前文档中选择一系列元素。 * d3.selectAll:从当前...

    D3Explor D3Explor

    4. 编程扩展:对于进阶用户,可以编写D3.js代码来实现独特的可视化效果或交互功能。 5. 保存和分享:完成可视化后,用户可以选择保存作品以便日后查看,或者生成分享链接,与他人共享。 通过D3Explor,用户可以轻松...

    前端项目-d3kit.zip

    1. **D3.js基础**:D3的核心在于它提供了一种方式将数据绑定到DOM(文档对象模型)元素上,并通过数据的变化驱动DOM的更新。开发者可以利用D3的API创建各种图表,如折线图、柱状图、饼图等。 2. **模块化设计**:d3...

    d3 带缩放的折线

    D3.js的核心概念是选择集(Selection),它允许我们选取DOM元素并对其进行操作。通过结合数据(Data Binding)和转换(Transitions)等功能,我们可以将数据与视觉元素紧密相连,实现动态和交互式的可视化。 创建...

    ext-d3-pivot-d3-component.zip

    EXT-D3结合了EXT JS的用户界面框架与D3.js的数据操作和可视化能力,而Pivot-D3则进一步扩展了EXT-D3的功能,提供了强大的数据透视表支持。 EXT-D3是EXT JS的一个扩展,EXT JS是一个流行的前端框架,用于构建复杂的...

    d3js流程图代码

    流程图的节点和连接线通常会绑定到JSON格式的数据对象。通过`d3.json()`方法,可以加载外部数据源,将数据与SVG元素关联。 3. **流程图元素** - **节点(Nodes)**:流程图中的每个步骤通常表示为一个节点。使用`...

Global site tag (gtag.js) - Google Analytics