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.js(Data-Driven Documents)是一个非常强大的JavaScript库,它允许开发者用数据来操作文档对象模型(DOM)。这个“前端项目-d3-selection.zip”压缩包文件显然是一个专注于D3库中“d3-selection...
《深入理解d3.js Extended:扩展D3与jQuery的融合应用》 在现代Web开发中,数据可视化已经成为不可或缺的一部分,而d3.js作为一款强大的数据驱动文档库,深受开发者喜爱。它允许开发者利用SVG、Canvas或HTML来创建...
【标题】"CA-Base-D3D-Menu-Selection.rar_d3d_d3d menu" 指的是一款针对Counter-Strike(简称CS)游戏的D3D菜单选择系统。这个压缩包包含了开发者用于增强CS游戏用户体验的D3D图形界面菜单。 【描述】"Menu D3D BR...
1. 设备(Device):这是Direct3D的核心对象,负责与硬件交互,处理渲染任务。有两种主要的设备类型,即软件设备和硬件设备。软件设备完全由CPU执行3D图形运算,而硬件设备则利用显卡的GPU来加速图形处理。 2. 顶点...
5. **初始化D3D**: 创建D3D对象,确定主显示器标识(adapterId),然后使用该标识设置CUDA使用的GPU。这一步确保CUDA和D3D使用相同的GPU进行互操作。 6. **初始化D3D设备**: 创建D3D设备,设置图形状态,如光照和...
D3D面向对象框架的核心目标是提供一种结构化和模块化的开发方式,以便于代码的组织、维护和扩展。这样的框架通常包括以下几个关键组件: 1. 设备管理:负责初始化Direct3D设备,设置渲染目标,处理设备丢失和恢复等...
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 ...
在服务端,这种数据结构通常以对象的形式存在,如: ```json { "data": "父节点", "left": { "data": "左子节点", "left": null, "right": null }, "right": { "data": "右子节点", "left": null, "right...
- **selection.enter**: 返回缺失元素的占位对象,指向绑定的数据中比选定元素集多出的部分。 - **selection.exit**: 返回多余元素的集合,即选择元素中比绑定数据多出的部分。这一机制常用于更新数据变化后的视图。...
而dagre-d3是D3.js的一个扩展,它为D3提供了一个布局引擎,专门用于处理有向图。dagre-d3的核心功能包括自动布局,它能够计算出节点之间的最佳位置,使得整个图看起来整洁有序。这在描绘复杂的流程或依赖关系时尤其...
这个库由Mike Bostock创建,其核心理念是让开发者能够直接操作DOM(文档对象模型)来绑定数据,并根据数据的变化自动更新视图。D3.js 的两个主要文件,`d3.min.js`和`d3.js`,都是实现这一功能的关键。 `d3.min.js`...
例如,它可能使用`d3.json()`加载数据,然后用`d3.pie()`和`d3.arc()`函数来计算饼图的扇区和形状,最后用`selection.data().enter().append()`等方法创建并更新SVG元素。 此外,由于提到了“拓扑结构的层级关系”...
《D3与THREE.js结合实现CSS3D变换详解》 在现代Web开发中,数据可视化扮演着至关重要的角色,而D3...这不仅扩展了D3的可视化能力,也为开发者提供了更丰富的表达手段,使他们能够以全新的视角展示数据,提升用户体验。
d3-relationshipgraph, 使用d3js可视化父对象关系的框架 d3-relationshipgraph 用于创建 D3.js的父级子关系的框架。示例在这里查看一个工作示例 。如果你已经使用 d3-relationshipgraph,可以编辑这个自述文件并为你...
1. selection对象:D3.js中的selection对象是对DOM元素的选择和操作。它提供了许多有用的方法来设置、获取和操作元素的属性、样式、内容等。 * d3.select:从当前文档中选择一系列元素。 * d3.selectAll:从当前...
4. 编程扩展:对于进阶用户,可以编写D3.js代码来实现独特的可视化效果或交互功能。 5. 保存和分享:完成可视化后,用户可以选择保存作品以便日后查看,或者生成分享链接,与他人共享。 通过D3Explor,用户可以轻松...
1. **D3.js基础**:D3的核心在于它提供了一种方式将数据绑定到DOM(文档对象模型)元素上,并通过数据的变化驱动DOM的更新。开发者可以利用D3的API创建各种图表,如折线图、柱状图、饼图等。 2. **模块化设计**:d3...
D3.js的核心概念是选择集(Selection),它允许我们选取DOM元素并对其进行操作。通过结合数据(Data Binding)和转换(Transitions)等功能,我们可以将数据与视觉元素紧密相连,实现动态和交互式的可视化。 创建...
EXT-D3结合了EXT JS的用户界面框架与D3.js的数据操作和可视化能力,而Pivot-D3则进一步扩展了EXT-D3的功能,提供了强大的数据透视表支持。 EXT-D3是EXT JS的一个扩展,EXT JS是一个流行的前端框架,用于构建复杂的...
流程图的节点和连接线通常会绑定到JSON格式的数据对象。通过`d3.json()`方法,可以加载外部数据源,将数据与SVG元素关联。 3. **流程图元素** - **节点(Nodes)**:流程图中的每个步骤通常表示为一个节点。使用`...