D3.js从源码分析到精通(二)

proprety

设置html元素无法使用属性或者样式的特殊属性,例如input的value ,复选框的 checked, 获取和设置

设置内置属性

   // 设置
    d3.select('#ccc').property('value','3eee')
    // 查找
    console.log(d3.select('#ccc').property('value'));
    // 3eee
	 d3.select('#ccc').property('value',()=>{
      return '3333'
    })
 	 // 选中
    d3.select('#ccc').property('checked',true)
    // 不选中
    d3.select('#ccc').property('checked',false)

text

添加内容textContent

==null
    d3.select('.aaa').text(null) // undefined  
	返回的都是''
    d3.select('.aaa').text('3333') 添加值
    d3.select('.aaa').text(()=>{
      return 'xxx'
    })

html

本质就是innerHTML

跟上面那个类似

 d3.select('.aaa').html(
       `<h1>HHHH</h1>`
    )

append

本质就是appendChild 方法,要父节点尾部添加一个节点

 let a=document.querySelector('.aaa')
 let b = document.createElement('p');
  a.appendChild(b)

d3.select(".aaa").append("p");
d3.select(".aaa").append(() => document.createElement("p"));
对等
不能用箭头函数会报错
a.select(function(){
      // @ts-ignore
      return this.appendChild(document.createElement('p'))
})

insert

语法

parentNode.insertBefore(newNode,referenceNode)
parentNode 父节点
newNode 被插入的节点
referenceNode  newNode插入这个节点之前

  let b=document.querySelector('.bbb')
  let newE = document.createElement('div');
    // 在父节点的第一个节点前插入一个节点
  b.insertBefore(newE,b.firstChild)
  // 不知道父节点的情况下, 在我的前面插入一个
  d.parentNode.insertBefore(newE, d);

parentNode

 	// 后代数量
    console.log(b.childElementCount);
    // 后代全部节点
    console.log(b.children);
    // first   没有返回null
    console.log(b.firstElementChild);
    // last
    console.log(b.lastElementChild);
    let c=document.createElement('p')
    // 添加到最后一个节点
    b.append(c)
    // 拿到子节点的属性
    console.log(b.querySelector('.ddd'));
    // 拿到子节点集合 NodeList
    console.log(b.querySelectorAll('.ccc'));
    // 在第一个后代前插入一个节点
    b.prepend(e);

语法解释

<div class="bbb">
  <div class="ccc"></div>
  <div class="ccc"></div>
  <div class="ccc"></div>
  <div class="ddd"></div>
</div>

在父节点 .bbb的子节点中 .ddd的前面插入一个p节点
d3.select('.bbb').insert('p','.ddd')
//创建的节点是一个函数
let newE = document.createElement('div');
let b=d3.select('.bbb')
    b.insert(function() {
      return newE
    },'.ddd')
如果 第二个参数 ==null 直接在末尾添加
 let b=d3.select('.bbb')
    b.insert('p')
如果第二个参数是一个函数,那么之前在这个的前面添加
    b.insert('p',()=>document.querySelector('.ddd'))
这个利用this也是可以的
d3.selectAll("div").select(function() {
  return this.insertBefore(document.createElement("p"), null);
});

remove

运用的removeChild

    let parent = document.querySelector('.bbb');
    let d = document.querySelector('.ddd');
    // 删除指定的某一个
    parent.removeChild(d)
	// 不知道父节点删除自身
	let d = document.querySelector('.ddd');
    if (d.parentNode) {
      d.parentNode.removeChild(d)
    }
	// 删除父节点的所有子节点
	let parent = document.querySelector('.bbb');
    while (parent.firstChild) {
      parent.removeChild(parent.firstChild)
    }

childNode.remove()

把对象再所属dom树中删除

var el = document.getElementById('div-02');
el.remove();
// id 为 'div-02' 的 div 被删掉了

    d3.select('.bbb').remove();  删除自身

clone

cloneNode

<div class="bbb">
  <div class="ccc"></div>
  <div class="ccc"></div>
  <div class="ccc"></div>
  <div class="ddd"></div>
</div>
<div id="bbb"></div>

把 .bbb整个节点clone 到#bbb里面
 let parent = document.querySelector('.bbb');
 let a= parent.cloneNode(true)
 document.querySelector('#bbb').appendChild(a)
// 如果cloneNode(false) 只会复制当前节点

文档说

selection.select(function() {
  return this.parentNode.insertBefore(this.cloneNode(deep), this.nextSibling);
});
相当于在在当前节点的下一个兄弟节点前面添加
如果没有下一个nextSubling 就是 null ,在末尾添加

d3.select('.bbb').clone(false); 复制自身
d3.select('.bbb').clone(true); 复制当前所有(包括子节点),在当前节点的下一个添加进入

sort() 排序

基于数据对文档中的元素进行排序

order()

暂时不知道,好像也是排序

说跟sort 等效,但是速度更快

raise()

把当前节点插入到父节点的最后一个子节点

<div class="bbb">
  <div class="aaa"></div>
  <div class="ccc"></div>
  <div class="ccc"></div>
  <div class="ddd"></div>
  <div class="eee"></div>
</div>

      d3.select('.aaa').raise()

<div class="bbb">
  <div class="ccc"></div>
  <div class="ccc"></div>
  <div class="ddd"></div>
  <div class="eee"></div>
  <div class="aaa"></div>
</div>
本质上就是 当前节点移动到父节点的最后一个子节点
 d3.select('.aaa').each(function() {
        this.parentNode.appendChild(this);
      })

源码

function raise() {
  if (this.nextSibling) this.parentNode.appendChild(this);
}

export default function() {
  return this.each(raise);
}
在源码中如果有下个兄弟才移动

lower

把当前节点移动到父节点的第一个子节点
d3.select('.eee').lower()

源码

function lower() {
  if (this.previousSibling) this.parentNode.insertBefore(this, this.parentNode.firstChild);
}

export default function() {
  return this.each(lower);
}

首先判断他是否有前一个节点,然后把他添加到最前面

create

let p=d3.create('p')
进行各种操作
最后 d3.select('.aaa').append(()=>p.node)
最后可以添加到创建个dom节点
d3.create('p').node()
这是一个dom节点

creator

创建一个元素,返回的是一个函数

    d3.select('#bbb').append(d3.creator('div'))