[D3] Better Code Organization with selection.call() with D3 v4
Most of D3’s native selection APIs also return the selection (or a new selection), to enable multiple method calls to be chained together. Since the code you write isn’t on the selection prototype, chaining your methods would take some extra work. selection.call()
will call any function reference you give it, providing the selection as the first parameter, and then it returns the selection for you to ensure chaining is supported.
var scores = [
{ name: 'Alice', score: 96 },
{ name: 'Billy', score: 83 },
{ name: 'Cindy', score: 91 },
{ name: 'David', score: 96 },
{ name: 'Emily', score: 88 }
]; var bar = d3.select('.chart')
.append('svg')
.attr('width', 225)
.attr('height', 300)
.selectAll('g')
.data(scores)
.enter()
.append('g')
.attr('transform', (d, i) => 'translate(0, ' + i * 33 + ')'); function scaleBar (selection, scale) {
selection.style('transform', 'scaleX(' + scale + ')');
} function setFill (selection, color) {
selection.style('fill', color);
} function fade (selection, opacity) {
selection.style('fill-opacity', opacity);
} bar.append('rect')
.style('width', d => d.score)
.attr('class', 'bar')
.on('mouseover', function (d, i, elements) {
d3.select(this)
.call(scaleBar, 2)
.call(setFill, 'orange'); d3.selectAll(elements)
.filter(':not(:hover)')
.call(fade, 0.5);
})
.on('mouseout', function (d, i, elements) {
d3.select(this)
.call(scaleBar, 1)
.call(setFill, 'lightgreen'); d3.selectAll(elements)
.call(fade, 1);
}); bar.append('text')
.attr('y', 20)
.text(function (d) {
return d.name;
});
[D3] Better Code Organization with selection.call() with D3 v4的更多相关文章
- jQuery学习--Code Organization Concepts
jQuery官方文档: http://learn.jquery.com/code-organization/concepts/ Code Organization Concepts(代码组织概念) ...
- [D3] Animate with the General Update Pattern in D3 v4
In D3, the General Update Pattern is the name given to what happens when a data join is followed by ...
- [D3] SVG Graphics Containers and Text Elements in D3 v4
SVG is a great output format for data visualizations because of its scalability, but it comes with s ...
- [D3] 13. Cleaner D3 code with selection.call()
selection.call() method in D3 can aid in code organization and flexibility by eliminating the need t ...
- d3.js:数据可视化利器之 selection:选择集
选择集/selection 选择集/selection是d3中的核心对象,用来封装一组从当前HTML文档中选中的元素: d3提供了两个方法用来创建selection对象: select(selecto ...
- D3中动画(transition函数)的使用
关于transition的几个基本点: 1. transition()是针对与每个DOM element的,每个DOM element的transition并不会影响其他DOM element的tra ...
- D3.js data() 方法详解
Binding data(数据绑定) D3各种图表的作用体现在将数据(Data)转换成可视化的过程. 比如将一个月的气温数据,通过树形图来展现,能够直观的看到气温走势,下个月还需不需要穿秋裤 :) 我 ...
- D3——基本知识点
选择器: d3.select - 从当前文档中选择一个元素 d3.selectAll - 从当前文档中选择多个元素 selection.append - 创建并追加一个新元素 selection.at ...
- D3.js学习(一)
从今天开始我将和大家一起学习D3.js(Data-Driven Documents),由于国内关于D3的学习资料少之又少,所以我觉得很有必要把自己学习过程记录下来,供同学们参考,如果文章有有哪些表达有 ...
随机推荐
- MyReport.Form表单引擎
MyReport.Form表单引擎.主要提供表单模板的设计以及表单模板的预览填报等功能集合. 支持文本框.选择框.数字框.日期框.图片框.组合框.弹出框等经常使用控件. watermark/2/tex ...
- vue -- 脚手架之webpack.dev.conf.js
webpack.dev.conf.js 开发环境模式配置文件: 'use strict'//js按照严格模式执行 const utils = require('./utils')//导入utils. ...
- 14.字符串hash寻找第一个只出现一次的字符
//char 0-255一共256个 char getonebyhash(char *str) { if (str == NULL) { return '\0'; } char ch = '\0'; ...
- Linux 设置文件默认打开方式
比如说我安装了一个绿色版的sublime(.tar解压出来的不是.deb) 但是现在我右键不能打开,不能添加为默认打开方式...这个时候就比较尴尬了... 我总不能每次都cd到安装目录下然后termi ...
- JavaWeb学习笔记:Tomcat
Tomcat 开源的 Servlet 容器. 部署并启动 tomcat server. 解压 apache-tomcat-6.0.16.zip 到一个非中文文件夹下. 配置一个环境变量. java_h ...
- 软件project经验总结系列之三 - 计划阶段控制
本文为软件project经验总结系列文章的第三篇.按照总论文章所设立的范围划分,本阶段重点讲述计划阶段的控制过程以及控制思路,笔者所站在的角度是乙方角度来进行表述整个阶段的推动过程,但对于甲方公司其基 ...
- 安装 VNC 和 XRDP
安装 VNC 和 XRDPapt-get install vnc4server tightvncserver xrdp fluxbox xtermcat >vncstop.sh << ...
- 005 python 整数类型/字符串类型/列表类型/可变/不可变
可变/不可变类型 可变类型 ID不变的情况下,值改变,则称之为可变类型,如列表,字典 不可变类型 值改变,ID改变,则称之为不可变类型,如 整数 字符串,元组 整数类型 int 正整数 用途就是记录年 ...
- CISP/CISA 每日一题 16
CISA 每日一题(答) 作业调度软件的优点: 1.作业信息仅需建立一次,减少错误发生概率: 2.可定义作业间的依赖关系,当某一项作业失败时,依赖于该作业的后续作业就不会被执行: 3.所有成功或失败的 ...
- CISP/CISA 每日一题 12
CISA 每日一题(答) 支付系统模式有哪些: 电子现金模式:支付者不必在线,无条件不可追溯性 电子支票模式:支付者不必在线,涉及个人隐私 电子转帐模式:收款人不必在线 图象处理中,应该有适当的___ ...