d3 v5.15.0 从入门到精通 - d3 入门篇一 D3 Selection - 《李俊扬的技术分享》

Selecting Elements 查找元素">Selecting Elements 查找元素
Modifying Elements 修改元素">Modifying Elements 修改元素

import selection_select from "./select";
import selection_selectAll from "./selectAll";
import selection_filter from "./filter";
import selection_data from "./data";
import selection_enter from "./enter";
import selection_exit from "./exit";
import selection_join from "./join";
import selection_merge from "./merge";
import selection_order from "./order";
import selection_sort from "./sort";
import selection_call from "./call";
import selection_nodes from "./nodes";
import selection_node from "./node";
import selection_size from "./size";
import selection_empty from "./empty";
import selection_each from "./each";
import selection_attr from "./attr";
import selection_style from "./style";
import selection_property from "./property";
import selection_classed from "./classed";
import selection_text from "./text";
import selection_html from "./html";
import selection_raise from "./raise";
import selection_lower from "./lower";
import selection_append from "./append";
import selection_insert from "./insert";
import selection_remove from "./remove";
import selection_clone from "./clone";
import selection_datum from "./datum";
import selection_on from "./on";
import selection_dispatch from "./dispatch";
export var root = [null];
export function Selection(groups, parents) {
  this._groups = groups;
  this._parents = parents;
}
function selection() {
  return new Selection([[document.documentElement]], root);
}
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
};
export default selection;

Selecting Elements 查找元素

d3.selection - 选取文档元素的根节点. 返回html元素(document.documentElement)
d3.select - 从文档中选取一个元素.（相当于querySelector）
d3.selectAll - 从文档中选择多个元素. （相当于querySelectorAll）
selection.select - 从每个被选中的元素中选择一个后代元素.
selection.selectAll -从每个被选中的元素中选择多个后代元素. ```javascript const html = d3.selection(); // 返回项目根元素 html元素 d3的selection类型 html.style(‘background-color’, ‘red’, ‘important’);

const body = d3.select(‘body’); html.style(‘background-color’, ‘red’, ‘important’);

const testList = d3.selectAll(‘.test-c’); // 获取到多个元素，可以一次性处理 testList.style(‘background-color’, ‘red’, ‘important’); // 对多个元素处理，效果一样


```javascript
`
<div id="test-c" className="test-c">
  <div className="test-c">
    <div className="test-c">
          content
    </div>
  </div>
</div>
`
const testList = d3.selectAll('#test-c'); 
// testList: {_groups: [NodeList(1)], _parents:[html]}
const item = testList.select('.test-c');
// item: {_groups: [NodeList(1)], _parents:[html]}
const items = testList.selectAll('.test-c');
// testList: {_groups: [NodeList(2)], _parents:[div#test-c.test-c]}

selection.filter - 基于数据对元素进行过滤.

// selection.filter(selection | fn(d, i)) - 基于数据对元素进行过滤.
var even = d3.selectAll("tr").filter(":nth-child(even)");
var even = d3.selectAll("tr").filter(function(d, i) { return i & 1; });
var even = d3.selectAll("tr").select(function(d, i) { return i & 1 ? this : null; });

selection.merge(other) - 返回一个将当前选择集和指定的 other 选择集合并之后的新的选择集。返回的选择集与当前选择集有相同数量的分组以及相同的父元素。当前选择集中的任何空缺 (null) 都会被指定的 other 中的对应的元素填充(如果存在的话)，如果 other 选择集有附加的组或者父元素，则将其忽略 ```javascript // selection.merge(selection) 例子 var circle = svg.selectAll(“circle”).data(data) // UPDATE .style(“fill”, “blue”);

circle.exit().remove(); // EXIT

circle = circle.enter().append(“circle”) // ENTER .style(“fill”, “green”) .merge(circle) // ENTER + UPDATE .style(“stroke”, “black”);


- d3.matcher(selection) - 给定指定的_选择器_，返回一个函数，如果`this`element [与](https://developer.mozilla.org/en-US/docs/Web/API/Element/matches)指定的选择器[匹配](https://developer.mozilla.org/en-US/docs/Web/API/Element/matches)，则该函数返回true 。通过.filter内部使用此方法。例如，这：
```javascript
const div = selection.filter("div");
const div = selection.filter(d3.matcher("div"));

d3.selector - 选择一个元素. 返回的是一个function,满足条件返回ture，否则返回false
```
const div = selection.select("div");
const div = selection.select(d3.selector("div"));
```
d3.selectorAll - 选择多个元素. 返回的是一个function,满足条件返回ture，否则返回false
```
const div = selection.selectAll("div");
const div = selection.selectAll(d3.selectorAll("div"));
```

d3.window(node) - 获取节点所属的window对象

d3.window(document).alert('666')
d3.window(document.getElementById('test01')).alert('888');

d3.style(node, name) - 获取节点当前的指定样式名称的样式值.
```
d3.style(document.getElementById('test01'), 'color');
```

Modifying Elements 修改元素

selection.attr(name[, value]) - 设置或获取属性.
selection.classed(names[, bool: boolean]) - 获取，添加或者移除 CSS 类. bool为true添加class，为false则删除对应的class，names可以用空格分割，例如”foo bar”
selection.style(name: string[, value: string [, priority: null | ‘important’]);

设置或获取style的值

selection.property(name[, value]) - 获取或设置一个特殊属性.
```
// 声明一个新的局部变量。例如：
var foo = d3.local();
selection.property(foo, function(d) { return d.value; });
```
有些 HTML 元素的属性比较特殊，不能直接使用 attr 和 style 操作，比如文本域的 value 属性以及 checkbox 的 checked 属性。使用本方法可以操作这些属性。
如果指定了 value 则将选中的元素对应 name 属性值设置为指定的 value。如果 value 为常量，则将选择集中所有的元素对应的属性都设置为指定的 value 常量。如果 value 为函数，则会为选择集中的所有元素依次调用，并传递当前元素绑定的数据 d，当前的索引 i 以及当前分组 nodes，在函数内部 this 指向当前 DOM 元素(nodes[i])。函数的返回值将会被设置为当前元素的属性值。使用 null 作为值表示移除当前属性。
如果没有指定 value 则返回当前选择集中第一个非空元素对应的属性值。当已知选择集中只包含一个元素时很有用。
selection.text([value]) - 设置或获取文本内容.
selection.html([value]) - 设置或获取 HTML 内容.
selection.append(type) - 创建、添加并返回一个新的元素. ```javascript // 查到的每个元素里都追加一个div元素

d3.selectAll(“p”).append(“div”); d3.selectAll(“p”).append(function() { return document.createElement(“div”); });


- _selection_.**insert**(_type_[, _before_])  - 创建、插入并返回一个新的元素.
```javascript
// 插到最后面
d3.selectAll('.test-a').insert(function(d, i){
        console.log(d, i); // undefined, 0
        var div = document.createElement("div");
        div.innerHTML = 'insert1';
        return div;
});
// 等价
d3.selectAll(".test-a").select(function() {
  var div = document.createElement("div");
  div.innerHTML = 'insert2';
  return this.insertBefore(div, null);
});
// 插到最后面
d3.selectAll(".test-a").insert("div").html('insert3');
// 插到第一个元素后面
d3.selectAll(".test-a").insert("div", ':first-child').html('insert4');

// selection.insert 源码
import creator from "../creator";
import selector from "../selector";
function constantNull() {
  return null;
}
export default function(name, before) {
  var create = typeof name === "function" ? name : creator(name),
      select = before == null ? constantNull : 
  typeof before === "function" ? before : selector(before);
  return this.select(function() {
    return this.insertBefore(create.apply(this, arguments), select.apply(this, arguments) || null);
  });
}

selection.remove - 从文档中移除元素.
```
d3.selectAll('.test-a').remove();
```
selection.clone([deep: boolean]) - 插入选中元素的克隆. ```javascript // selection.clone 源码 function selection_cloneShallow() { var clone = this.cloneNode(false), parent = this.parentNode; return parent ? parent.insertBefore(clone, this.nextSibling) : clone; }

function selection_cloneDeep() { var clone = this.cloneNode(true), parent = this.parentNode; return parent ? parent.insertBefore(clone, this.nextSibling) : clone; }

export default function(deep) { return this.select(deep ? selection_cloneDeep : selection_cloneShallow); }


- _selection_.sort([_compare: function]_) - 基于数据对文档中的元素进行排序.
```javascript
// 如果不传入参数compare，默认使用ascending方法
function compare(a, b) {
    return a < b ? -1 : a > b ? 1 : a >= b ? 0 : NaN;
}
function ascending(a, b) {
  return a < b ? -1 : a > b ? 1 : a >= b ? 0 : NaN;
}

selection.order() - 在文档中重新排列元素. 无参数，自动排序，如果数据已经有序的话，这个方法与 selection.sort 等效，但是要更快。
selection.raise() - 按序重新插入每个选中的元素，每次插入的元素都作为其父元素的第一个子元素。
```
相当于
selection.each(function() {
this.parentNode.appendChild(this);
});
```
selection.lower() - 将每个选中的元素重新排列为其对应父节点的第一个子元素.
```
selection.each(function() {
this.parentNode.insertBefore(this, this.parentNode.firstChild);
});
```
d3.create - 创建一个指定名称的与文档分离的元素.

d3.creator - 根据名称返回一个创建指定元素的函数.

var div2 = d3.creator('div')
d3.selectAll('#test01').append(div2).text('999')