一、引用/安装方式

d3-selection是一个可以单独安装使用的模块，使用方式
npm install d3-selection
import {selectAll} from "https://cdn.skypack.dev/d3-selection@3";
<script src="https://cdn.jsdelivr.net/npm/d3-selection@3"></script>
二、要点及举例

selection 可以接收w3c 选择器(W3C selector strings )，如标签、id、class。
顶层方法为两个：d3.select 和 d3.selectAll。返回Selection对象。
Selection可以设置attributes, styles, properties, HTML 或text等。
使用join方法可以使用元素与数据对应起来。
使用举例
// 选择<a>元素
const anchor = d3.select("a"); 
// 选择所有<p>元素
const paragraph = d3.selectAll("p");
// 设置style
d3.selectAll(document.links).style("color", "red");
//设置属性
d3.selectAll("p").attr("class", "graf")
// 为所有p元素添加click事件响应
d3.selectAll("p").on("click", function(event) {
  d3.select(this).style("color", "red");
});
// 链式调用，选择所有p元素下面的b元素
const b = d3.selectAll("p").selectAll("b");
// filter用于选择后的筛选,可使用selector或者function，funtion里返回ture/false。
const even = d3.selectAll("tr").filter(":nth-child(even)");
const even = d3.selectAll("tr").filter((d, i) => i & 1);
// 也可以使用select来实现，但返回值为this/null
d3.selectAll("tr").select(function(d, i) { return i & 1 ? this : null; });
// merge用于合并不同的selection
const odd = selection.select(function(d, i) { return i & 1 ? this : null; ));
const even = selection.select(function(d, i) { return i & 1 ? null : this; ));
const merged = odd.merge(even);
// 开关某项style
selection.classed("foo bar", true);
selection.classed("foo", () => Math.random() > 0.5);
// 添加元素
d3.selectAll("div").append("p");
// 等效于
d3.selectAll("div").append(() => document.createElement("p"));
// 或者
d3.selectAll("div").select(function() {
  return this.appendChild(document.createElement("p"));
});
d3.selectAll("div").append(d3.creator("p"));
//删除元素
d3.select("#ele").remove()
//克隆元素
d3.select("#ele").clone()
//使用data
svg.selectAll("circle")
  .data(data)
  .join("circle")
    .attr("fill", "none")
    .attr("stroke", "black");
// 分别处理enter/update/exit
svg.selectAll("circle")
  .data(data)
  .join(
    enter => enter.append("circle"),
    update => update.attr("fill", "blue"),
    exit => exit.remove()
    .attr("stroke", "black");
// 单独使用enter/update/exit
const div = d3.select("body")
  .selectAll("div")
  .data([4, 8, 15, 16, 23, 42])
  .enter().append("div")
    .text(d => d);
事件处理
 ·selection.on(type,(event,d)=>{})
 type可以是所有DOM事件类型，如’click’,‘mousemove’
获取鼠标位置
 1、e.pageX/pageY返回全局坐标值
 2、d3.pointer(e,d)返回当前坐标系的坐标值。 
 svg.on('click',function(event,d){
     console.log(d3.pointer(event));
     console.log(event.pageX,event.pageY);
selection.each((d,i)=>{}) 
parent.each(function(p, j) {
  d3.select(this)
    .selectAll(".child")
      .text(d => `child ${d.name} of ${p.name}`);
});
call, 调用自定义处理函数，实现代码复用，保持链式调用风格。 
function name(selection, first, last) {
  selection
      .attr("first-name", first)
      .attr("last-name", last);
d3.selectAll("div").call(name, "John", "Snow");
三、模块关系
 
(一）模块构成
 
分析index.ts文件，由以下模块构成，可以通过d3.select/d3.create…调用。
  
（二）模块依赖关系
 
selection/index是selection子模块。
 
 顶层模块对子模块的使用主要在Selection的定义，通过d3.select/selectAll可以返回该对象，并进一步可以使用子模块的方法进行操作。所以常看到类似的代码： 
selection=d3.select("...")//返回一个Selection结构。
selection.select/selectAll/attr/...
Selection定义如下： 
Selection.prototype = selection.prototype = {
  constructor: Selection,
  select: selection_select,
  selectAll: selection_selectAll,
  filter: selection_filter,
  data: selection_data,
  enter: selection_enter,
  exit: selection_exit,
  join: selection_join,
  merge: selection_merge,
  order: selection_order,
  sort: selection_sort,
  call: selection_call,
  nodes: selection_nodes,
  node: selection_node,
  size: selection_size,
  empty: selection_empty,
  each: selection_each,
  attr: selection_attr,
  style: selection_style,
  property: selection_property,
  classed: selection_classed,
  text: selection_text,
  html: selection_html,
  raise: selection_raise,
  lower: selection_lower,
  append: selection_append,
  insert: selection_insert,
  remove: selection_remove,
  clone: selection_clone,
  datum: selection_datum,
  on: selection_on,
  dispatch: selection_dispatch
(三）子模块selection
 
selection文件夹下包含了若干子模块，封装了一系列对selection的操作。模块关系如下：
  
四、模块功能
 
 选择元素
 接收w3c 选择器。select选择单个，selectAll选择多个。
 select / selectAll / filter / merge / selectChild / selectChildren / matcher / selector / selectorAll / window style
 
 修改元素
 attr / classed / style / property / text / html / append / insert / remove / clone / sort / order / raise / lower / create / creator
 
 加入数据
 data / join / enter / exit / datum
 
 处理事件
 on / dispatch / pointer / pointers
 
 控制流
 each / call / empty / node / nodes / size /
 
 本地变量
 local / set / get / remove / toString /
 
 命名空间
 namespace / namespaces
 
                                    选择允许对文档对象模型（DOM）进行强大的数据驱动转换：设置属性，样式，属性，HTML或文本内容等。使用数据连接的进入和退出选择，您还可以添加或删除与数据对应的元素。
选择方法通常返回当前选择或新选择，允许通过方法链对给定选择上的多个操作进行简洁应用。例如，要设置当前文档中所有段落元素的类和颜色样式：
 d3.selectAll("p") .attr("class", "graf"...
                                    D3 的 selection 跟JQuery一样，都是使用 css 选择器去选 DOM 上的元素 (element)，因此使用过 JQ 的人，会比较熟悉使用d3.selection选择对应的元素后，它会返还一个 selection 的物件实体 (或是如果画面上没有元素的话，会建立一个新的实体)，之后就可以使用这个实体拥有的函式去调整它的子集合。类似js函数中的链式调用语法D3 selection 的运作方式是:指定好 Dom 树位置并选取特定元素将资料绑订到指定元素。
                                    d3-selection 入门篇（1）,制作响应式 Github ContributionCalendar
前端同学们对 d3 肯定是相当的熟悉了，在我们制作复杂的，重交互的图表时，常常会用到它。同时我们在使用它的时候，往往会结合 vue/react 这类前端框架，往 d3-selection 里传送 VNode/ReactNode，从而达成水乳交融，灵活多变的效果。
但是 d3 整个家族是非常庞大的, 光官方的子依赖包就有 30 个。这导致一开始暴露给我们的 api 就过多了，新手很难上手。于是，.
译者: ssthouse
本文讲解的是关于 D3.js 中 d3-selection 的使用. d3-selection 是 d3 的核心所在, 它提供了一种和以往 Dom 操作 和 数据操作 完全不同的思路, 让我们能非常优雅的进行数据可视化工作.
本文是 d3 作者对于 d3-s...
今天在学习如何使用d3.js的事件处理函数过程中，发现d3.mouse和d3.event在浏览器报错不是函数，于是前往官方文档，发现这里两个函数已经在d3V6.0中删除了！
于是，我在往上查了好久，没有查到替代的函数，只能回头再次翻阅文档，终于被我找到了！
在V5.0和更早的版本中，sel.on(type,callback)的callback有三个参数：
d：绑定当前元素的数据点；
index：当前数据点在选择集中的索引；
nodes：当前数据点所在的选择集；
而在最新的V6.0版本
                                    select与selectAll返回的结果都是d3的选择集合，并且都能进行集合运算，唯一不同的是集合的数量，select的数量恒小于等于1，并且总是返回第一个元素(如果存在的话)，最令人惊讶的是，select还难以建立集合的父子关系；而selectAll则是选择的所有元素。 
      假定文档中现有的dom元素如下所示：<body>
    <ul id="user-list">
                                    d3-selection (DOM操作相关API)
Selections 允许强大的数据驱动文档对象模型 (DOM): 设置 attributes, styles, properties, HTML 或 text 内容等等。使用 data join 的 enter 和 exit 选择集可以用来根据具体的数据 add 或 remove 元素。
1.selection
选择器根元素: document.documentElement
2.selectAll(selector)
参数为css选择器，例如标签选择
出于交互考虑，selection支持监听(listening)和分派(dispatching)事件。
selection.on(typenames[, listener[, options]])
根据typenames向元素添加或删除事件监听，类型...
  D3 是一个 Javascript 库，用于创建数据可视化图形，全称 Data-Driven Documents 也就是数据驱动文档，文档指的就是基于 web 的文档，代表可以在浏览器中展示的一切，包括 SVG 以及 一般的 HTML ， D3扮演的是一个驱动程序的角色，联系着数据和文档
    &lt;body&gt; 
        &lt;p&gt;hello world&lt;/p&gt;
        &lt;script src="http://d3js.org/d3.v3.min.js" charset="utf-8"&gt;&lt;/script&gt; 
        &lt;script&
                                    evs-selection
数据可视化以数据为主，那对数据集的选择就尤为重要，这个模块允许对DOM进行强大的数据驱动的转换，如设置属性(attributes)、样式、属性(properties)、html以及文本等，通过绑定和解绑数据，就可以直接添加和删除对应的元素。
选取方法返回当前选择集或一个新的选择集，支持链式操作，例如设置当前文档的所有段落元素的类和颜色样式：
evs.selectAll(...