Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

D3 相关知识点归纳 #19

Open
waltcow opened this issue Mar 23, 2017 · 0 comments
Open

D3 相关知识点归纳 #19

waltcow opened this issue Mar 23, 2017 · 0 comments

Comments

@waltcow
Copy link
Owner

waltcow commented Mar 23, 2017 •
edited
Loading 

var theData = [ 1, 2, 3 ]
var p = d3.select("body").selectAll("p")
 .data(theData)
  .enter()
  .append("p")
  .text("hello ");

会生成以下的结构

<body>
  <p>hello </p>
  <p>hello </p>
  <p>hello </p>
</body>

selectAll 方法使用类似css选择器的语法去抓取DOM元素，
不像select方法那样（只返回第一个选中的元素），
它将选中所有match中的elements，
但是当前的HTML 文档流上面根本不存在<p>元素啊，它究竟做了什么鬼，
其实它选中的是所有即将可用的<p>而已，在此时，p是不存在的，
它返回了一个空的selection

再后面的用到了.data(theData)和 enter()后 ,我们就可以把数据和空的selection进行绑定

data操作符返回了三个 virtual selections

这三个分别是

  • enter
  • update
  • exit

enter selection它包含了一些确是元素的placeholder
update selection 它包含了一些存在的元素和data进行数据的绑定
exit selection 它包含剩下被删除的元素
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@waltcow