理解D3js中的enter,exit方法

在我第一次使用D3js库写第一个图表的时候,就对他绑定数据的方法感到迷惑,当时怎么也不明白为什么要这样写来绑定数据。等到练习的次数多了,多的东西多了之后再回头看,原来一切都是那么理所应当,原来如此。

这就像是我们一生中遇到的很多事情一样,第一次无法接受,经过时间的沉淀,慢慢懂了,就不再耿耿于怀,变得释然。

但是我还是怕忘了此刻,所以马上写一篇文字总结一下。

<body>
    <p></p>
</body>
<script>
    var p = d3.select('body').selectAll('p');
    var dataset = [1,2,3,4,5,6,7,13];

    var update = p.data(dataset);
    var enter = update.enter();
    var exit = update.exit();
</script>

上边的HTML里边包含一个p标签,在JS脚本里边声明一个存放数据的数组dataset。

首先使用D3的selectAll()方法把所有的p标签选择出来,之后使用data() 方法为p标签集合绑定数据,并将所有的绑定了数据的p元素赋值给自己声明的update变量。

update 变量里包含所有已经存在的p标签,就上边的HTML来将就只有一个p标签。

enter变量包含的是dataset数组中的元素个数减去HTML中已经存在的元素个数的p标签(dataset中有8个元素,而HTML中有1个,因此enter中就有7个p标签元素),当数据中的元素个数大于HTML中已存在的元素个数时才能得到enter多出的那部分需要绑定数据的标签元素。

exit变量和enter 正好相反,当dataset中的数据元素个数少于HTML中需要绑定数据的元素个数时,就会得到多余出来的标签元素,这些多余出来的标签元素就存放在exit变量中。

这样enter()exit() 两个函数的含义就搞明白了!

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
您的问题是关于数据可视化工具D3.js的相关知识,是吗?那么我来分享一下我的学习收获。 首先,我学习了D3.js的选择器与相关方法D3.js提供了很多选择器与方法,用于选择DOM元素,对其进行操作,以及创建新元素。例如,D3.select()方法用于选择单个元素,D3.selectAll()方法用于选择多个元素,D3.append()方法用于添加新元素等。这些方法非常灵活,可以根据不同的需求进行组合使用。 其次,我学习了D3.js的选择集与数据绑定。D3.js的选择集是对DOM元素的封装,可以对其进行数据绑定,实现数据驱动的可视化。我学习了如何使用D3.data()方法将数据与选择集绑定,使用D3.enter()方法添加新元素,使用D3.exit()方法删除旧元素等。 此外,我还学习了D3.jsenter-update-exit模型及其应用。这是D3.js常用的一种数据绑定模式,用于实现数据驱动的可视化。其enter表示新数据进入时所需要进行的操作,update表示已有数据更新时所需要进行的操作,exit表示已有数据离开时所需要进行的操作。这个模型非常实用,可以帮助我们更好地理解D3.js的数据绑定。 最后,我学习了csv、tsv、json、xml等数据格式,以及D3.js获取外部数据的方法D3.js提供了多种方法用于获取外部数据,例如使用D3.csv()、D3.json()、D3.text()等方法。我学习了如何使用这些方法获取不同格式的数据,以及如何进行数据解析和预处理。 总之,学习D3.js对我来说是一次非常有收获的经历。通过学习D3.js,我不仅学会了如何使用这个工具进行数据可视化,还学会了如何理解数据驱动的可视化思想,这对我的工作和学习都有很大的帮助。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值