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的更多相关文章

  1. jQuery学习--Code Organization Concepts

    jQuery官方文档:  http://learn.jquery.com/code-organization/concepts/ Code Organization Concepts(代码组织概念) ...

  2. [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 ...

  3. [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 ...

  4. [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 ...

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

    选择集/selection 选择集/selection是d3中的核心对象,用来封装一组从当前HTML文档中选中的元素: d3提供了两个方法用来创建selection对象: select(selecto ...

  6. D3中动画(transition函数)的使用

    关于transition的几个基本点: 1. transition()是针对与每个DOM element的,每个DOM element的transition并不会影响其他DOM element的tra ...

  7. D3.js data() 方法详解

    Binding data(数据绑定) D3各种图表的作用体现在将数据(Data)转换成可视化的过程. 比如将一个月的气温数据,通过树形图来展现,能够直观的看到气温走势,下个月还需不需要穿秋裤 :) 我 ...

  8. D3——基本知识点

    选择器: d3.select - 从当前文档中选择一个元素 d3.selectAll - 从当前文档中选择多个元素 selection.append - 创建并追加一个新元素 selection.at ...

  9. D3.js学习(一)

    从今天开始我将和大家一起学习D3.js(Data-Driven Documents),由于国内关于D3的学习资料少之又少,所以我觉得很有必要把自己学习过程记录下来,供同学们参考,如果文章有有哪些表达有 ...

随机推荐

  1. 论Nim中的 proc 和 method

    在Nim中.proc 是定义过程的keyword.method 是定义方法的keyword.它们之间根本的差别是proc定义的过程是静态绑定.method定义的方法是动态绑定.谈到静态绑定.动态绑定又 ...

  2. 【VC编程技巧】窗口☞3.4利用bitmap改变对话框的背景。

    效果图: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvY2hlbl9qaW50/font/5a6L5L2T/fontsize/400/fill/I0JBQ ...

  3. DistBelief 框架下的并行随机梯度下降法 - Downpour SGD

      本文是读完 Jeffrey Dean, Greg S. Corrado 等人的文章 Large Scale Distributed Deep Networks (2012) 后的一则读书笔记,重点 ...

  4. Linux下MySQL允许远程连接以及授权命令

    --针对某个库做授权 GRANT ALL PRIVILEGES ON *.* TO 'myuser'@'%' IDENTIFIED BY 'mypassword' WITH GRANT OPTION; ...

  5. 42.cnpm不是内部命令的解决方案:配置环境变量

    转自:https://blog.csdn.net/u014540814/article/details/78777961

  6. es6 --- var const let

    var  const   let  区别 今天第一次遇到const定义的变量,查阅了相关资料整理了这篇文章.主要内容是:js中三种定义变量的方式const, var, let的区别. 1. const ...

  7. Kinect 开发 —— 语音识别(下)

    使用定向麦克风进行波束追踪 (Beam Tracking for a Directional Microphone) 可以使用这4个麦克风来模拟定向麦克风产生的效果,这个过程称之为波束追踪(beam ...

  8. C_数组详解

    数组: 一 一维数组 1.1 一维数组的定义: 类型符 数组名[常量表达式]; int a[10]; 说明: 1.数组的命名规则遵循标识符命名规则. 2.定义时需要指定元素的个数.方括号里的常量表达式 ...

  9. colrm---删除文件制定列

  10. nginx学习十一 nginx启动流程

    今天用了一天的时间看nginx的启动流程,流程还是非常复杂.基本的函数调用有十几个之多.通过看源代码和上网查资料,弄懂了一些函数.有些函数还在学习中,有些函数还待日后学习,这里记录一下今天所学.加油! ...