本篇blog的运用的d3版本为d3.js v5.9.2
将依据扼要引见、试验及意义举行
扼要
d3.js经由过程data join(数据绑定)建立,更新及烧毁元素,怎样操纵元素则是经由过程selection。总结以下
个中,selection的三种状况就将data与elements连系在一起,举行对元素的掌握
他们之前的关联如图所示(图片泉源:Thinking with Joins)
接下来用试验进一步申明区分吧
试验
重要会用到以下几个API:
selection.data():返回代表update
的selection,同时定义enter selection
和exit selection
,update按上图明白示意又有数据又有元素
selection.enter():返回enter selection
,enter中文为“进入”,我明白为有数据但无元素,能够进入图表
selection.exit():返回exit selection
,exit中文为“退出”,我明白为无数据绑定的元素,能够退出图表
selection.join():对已绑定数据的元素做插进去,移除过剩,更新数据,能够简化操纵
初始HTML及CSS
HTML以下
<div class="chart"></div>
CSS以下
.chart div{
font: 10px sans-serif;
background-color: steelblue;
text-align: right;
padding: 3px;
margin: 1px;
color: white;
}
接下来以四种状况熟习enter,update与exit:
- chart下无子元素
- chart下子元素少于数据(实在和上一种差不多,但为了轻易视察列出来)
- chart下子元素数目即是数据
- chart下子元素数目多于数据
chart下无子元素
<div class="chart"></div>
数据及JS代码以下
const data = [10,55,33];
let selection = d3.select('.chart')
.selectAll('div')
.data(data);
console.log(selection);
(注重这里每个selection是一个数组对象,每个元素为一个数组)
_groups:这里是代表update的selection,既有数据,又有元素;无元素的数据则用empty示意
enter:有数据,无元素
exit:无数据,有元素
关于enter,可经由过程selection.enter()举行操纵
let enterSelection = selection.enter();
console.log(enterSelection);
enterSelection.append('div')
.style('width', d => d * 10 + 'px')
.text(d => d);
chart下子元素少于数据
<div class="chart">
<div></div>
</div>
const data = [10,55,33];
let selection = d3.select('.chart')
.selectAll('div')
.data(data);
// .style('width', d => d * 10 + 'px') //解释去掉就会设置第一个div的width
// .text(d => d);
console.log(selection);
let enterSelection = selection.enter();
console.log(enterSelection);
enterSelection.append('div')
.style('width', d => d * 10 + 'px')
.text(d => d);
console.log(selection)
显现以下:
enter:.chart下有一个div,且这个div有数据绑定,故enter的第一个元素用empty示意,三个数据剩下两个用EnterNode示意
exit:.chart下有一个div,但他有数据绑定,所以exit中这个div用一个empty示意
_groups(这里示意update selection):.chart下的有一个div而且绑定上了数据,盈余两个数据没有元素绑定,故用empty示意
chart下子元素数目即是数据
<div class="chart">
<div></div>
<div></div>
<div></div>
</div>
const data = [10,55,33];
let selection = d3.select('.chart')
.selectAll('div')
.data(data);
// .style('width', d => d * 10 + 'px')
// .text(d => d);
console.log(selection);
原理同上
chart下子元素数目多于数据
<div class="chart">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
const data = [10,55,33];
let selection = d3.select('.chart')
.selectAll('div')
.data(data);
// .style('width', d => d * 10 + 'px')
// .text(d => d);
console.log(selection);
可见exit下多了末了一个未绑定数据的元素,即对应图片中的末了一个元素
可经由过程selection.exit()对其举行操纵
let exitSelection = selection.exit();
console.log(exitSelection);
exitSelection.remove();
selection.join()简化操纵
之前无论是对enter,exit以及update的操纵能够都须要经由过程selection.enter()及selection.exit()等API猎取selection,运用selection.join()能够极大地简化操纵,同时部分衬着提高了效力
以下依据之前的例子简朴举例
子元素少于数据或无子元素
<div class="chart">
<div></div>
</div>
let selection = d3.select('.chart')
.selectAll('div')
.data(data).join('div')
.style('width', d => d * 10 + 'px')
.text(d => d);
子元素多于数据
<div class="chart">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
let selection = d3.select('.chart')
.selectAll('div')
.data(data).join('div')
.style('width', d => d * 10 + 'px')
.text(d => d);
js是一样的代码
,同时把过剩的元素删去了
data join意义
1.有利于动态数据的可视化编程
以上仅仅只是静态数据,但我们能够扩展到动态的数据,如data数组元素增添或削减,三种状况使得我们便于操纵数据,仅仅只需运用selection.join()或许selection.remove()等等
2.编程更倾向声明式
当数据大小转变,或数据量增加削减时,不须要运用if或许for等语法。update,enter及exit三种状况连系API使得语法精练,大幅度提拔编程效力
3.轻易增加动画结果
实在意义同第一条很相像,三种状况能够轻易我们对进入图表或退出图表的元素建立动画,例子以下
<div class="chart"></div>
const data = [10,55,33];
const t = d3.transition()//定义动画变更
.duration(500)
.ease(d3.easeLinear);
let selection = d3.select('.chart')
.selectAll('div')
.data(data).join('div').style('width', 0).
transition(t) //运用动画变更
.style('width', d => d * 10 + 'px')
.text(d => d);
如许就会有动画结果了
总结
处理了一向猎奇的题目,开端入门,有不对或建议请大佬斧正
参考资料
Thinking with Joins
编程范式:敕令式编程(Imperative)、声明式编程(Declarative)和函数式编程(Functional)
selection.data()
selection.enter()
selection.exit()
selection.join()