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'))
决定自己的高度的是你的态度,而不是你的才能
记得我们是终身初学者和学习者
总有一天我也能成为大佬