d3-selection

Selection elements dom选择器

d3.selection()

选中根dom
在原型链上添加自定义方法

d3.select(selector)

选中第一个
selector可以是字符串，也可以是指定的dom元素

d3.selectAll(selector)

选中所有
selector可以使字符串，
也可是一个包含指定dom元素的可迭代对象

selection.select(selector)

selector可以是字符串、dom、函数
函数类型必须返回domElement或null

selection绑定的数据会向下传递到被选中的元素中

selection.selectAll(selector)

selector可以是字符串、dom、函数
函数类型必须返回domElement组成的可迭代对象或空数组

selectionAll.selectionAll返回的元素会被自动分组

selection.filter(filter)

过滤器
filter可以是字符串或者函数

selection.selectChild(selector)

选中第一个selector匹配到的孩子，
selector可以是字符串、函数
没指定selector返回第一个孩子

selection.selectChildren(selector)

选中每一个selector匹配到的孩子，
selector可以是字符串、函数
没指定selector返回所有孩子

selection.selection()

返回对应选中元素

d3.matcher(selector)

返回一个函数，函数指向的this如果满足selector返回true
是d3在selection.filter中用到的内部方法

d3.selector(selector)

返回一个函数，函数指向的this是第一个满足selector的元素
selection.select用到的内部方法

d3.selectorAll(selector)

返回一个函数，函数指向的this是所有满足selector的元素
selection.selectAll用到的内部方法

d3.window(node)

• node是dom节点，返回所在document的默认窗口
• node是document，返回所在的默认窗口
• 其它，返回node

d3.style(node, name)

获取指定node元素的指定name样式属性值

Modifying elements 修改元素

selection.attr(name, value)

修改/获取选区指定属性

selection.classed(names, value)

1
2

selectiohn.classed('foo',false)
    .classed('bar',true)

添加/去除类名

selection.style(name, value, priority)

修改/获取样式属性

selection.text(value)

将selection下的所有内容替换成value文本
无参数时返回selection下第一个子元素的文本内容

selection.html(value)

修改/获取selection的innerHTML，
对svg或其他不支持html的元素不适用

selection.append(type)

新增的元素从后面插入

type可以是字符串或函数，
字符串可以带前缀

selection.insert(type, before)

将type类型的元素插入到before之前

selection.remove()

移除selection

selection.clone(deep)

在selection后插入一个复制元素，
deep为false时，不会复制子元素

selection.sort(compare)

选区数据排序，默认升序

selection.order()

如果selection绑定了data数据，
data数据的顺序重排后需要根据新顺序重新处理selection元素，
可以使用selection.order()

selection.raise()

selection的每个子元素从队尾顺序推入

selection.lower()

selection的每个子元素从队首顺序推入

create(name)

创建一个name名称的元素

creator(name)

指定元素生成器，

selection.append和selection.insert创建新元素的内部方法

Joining data 数据绑定

By passing separate functions on enter, update and exit,
you have greater control over what happens.
And by specifying a key function to selection.data,
you can minimize changes to the DOM to optimize performance.

在数据驱动变化的可视化图表中
通过控制selection.data的key值，
可以最小化dom变化的开销，
通过指定join的enter、update、exit，
可以对数据绘制的过程有更多的控制。

selection.data(data, key)

data是一个可迭代对象
key是data用于排序的凭据，
可以是函数类型

selection.join(enter, update, exit)

对绑定的数据进行处理
enter、update、exit是三个生命周期，
可以对数据进行不同的处理

1
2
3
4
5
6
7
8
9

svg.selectAll("circle")
  .data(data)
  .join(
    enter => enter.append("circle"),
    update => update,
    exit => exit.remove()
  )
    .attr("fill", "none")
    .attr("stroke", "black");

selection.enter/update/exit

如果有这么一个data序列：[2,3,4,5,6]
把data与某一selection绑定，
那么在enter时，data就是[2,3,4,5,6]

之后对data做一定的修改，data变成了[4,5,6,7,8,9]
那么enter、update、exit接收到的数据依次如下：

• enter：[7,8,9]
• update：[4,5,6]
• exit：[2,3]

一般在这三个步骤中做一些动画过渡操作，
在enter中初始化元素，
在exit中remove对应元素

selection.datum(value)

为选中的所有区域提供完全相同的value数据

selection.merge(other)

合并selection与ohter selection，
selection.join中enter和update合并时使用的内部方法

Handling events 事件监听

selection.on(typenames, listener, options)

typenames不仅可以是单个事件名，
也可以是由空格分隔的多个事件名：”input change”
同时可以添加后缀：”click.foo click.bar”

selection.dispatch(type, parameters)

调用selection绑定的type事件，
parameters可以配置的项有：

• bubbles：允许向上冒泡
• cancelable：允许event.preventDefault
• detail：event参数和自定义数据关联

d3.pointer(event, target)

获事件event触发时，相对target元素的坐标位置

event可以是MouseEvent、PointerEvent、Touch或者其他涉及到坐标位置的操作

• event 事件类型
• target 目标点

d3.pointers(event, target)

涉及到多个点位触发的事件，比如Touch事件
返回的是由多个点位坐标组成的数组

Control flow 流向控制

selection.each(function)

遍历一个可迭代的选中区域对象中的每一个选中区域。

selection.call(function, …arguments)

一般用于对生成器函数进行封装后，可重复调用：
生成器函数：

1
2
3
4
5

function name(selection, first, last){
    selection
        .attr("first-name",first)
        .attr("last-name,last")
}

之后可以批量调用该函数：

1

d3.selectAll("div").call(name,"John","Snow")

相当于：

1

name(d3.selectAll('div'),'John','Snow')

selection.empty()

用于判断selection是否为空

selection.nodes()

获取selection选中的一个数组

selection.node()

返回selection选中的元素

selection.size()

返回选中区包含元素的数量

Local variables 本地标识

d3.local()

生成一个独一无二的变量名

d3.local.set(node, value)

一般d3.selection.each配合使用，
用于给每个节点赋予value标示值

d3.local.get(node)

获取节点的唯一标示值

d3.local.remove(node)

删除节点存储的标示值