d3学习-select, text, data,filter, style, observable中html的表示htl
来自observable官方教程:https://www.youtube.com/playlist?list=PLOHIJAFwtkEcK_mLLScnX2B-yHDjzSxuR
d3英文是三个D,data
driven
document
,并不是一个完全的图表框架
这篇文章主要是根据observable官方正在进行的d3直播进行简单的总结
1.d3,svg,html,css, js, observable 简介
其中需要注意的是在observable上建立html的时候,可以用“新建”悬浮按钮,然后搜索html,也可以在js中直接写一个html,格式为htl.htmlhtml代码
在observable中使用js的时候通常一个单元格只能写一行,不过加上大括号就可以写多行了,注意最后要反悔一个值
2.d3的使用
主要代码案例是
A.主要代码
d3.select(html).selectAll("p").data(data).text(d=>${d.id}-${d.name}).filter((d,i)=>i>1).style("color","red");
代码解释:
1.select
, selectAll
是d3框架中规定的函数,一般而言就是选择dom数据,类似queryselector,queryselectorAll,不过可以直接加dom或svg变量
,比如这里面的select(html)
2.data()
是d3
规定的函数,给dom绑定数据,一般而言里面利用的数据是个列表,dom列表中有多少dom,列表长度就是多少。可以与text等函数结合从而改变dom元素
.select(html).selectAll("p")
整体过程是选定html,然后选定里面所有p元素,
.text(d=>${d.id}-${d.name})
给p元素列表绑定数据,使用text函数改变每个dom中的innerText为绑定的data数据控制。
.filter((d,i)=>i>1).
筛选索引大于1的元素
.style("color","red")
将所选中的所有元素的颜色改为红色
4.使用text()
函数时里面是回调函数(这里对没学过js的可能比较难,是对列表中每个元素进行操作),默认使用的是绑定的data,第二顺位是索引。作用是对dom列表中每个dom进行一次innerText=。。。的操作。${d.name}是可以引用变量显示在字符串里面。
B.代码中html定义
let html=htl.html`<div><p>ewcx</p><p>ferw</p></div>`
用的是js中定义html的方法
C.代码中data定义
let data=[{"name":"xd","id":"1"},{"name":"xddfe","id":"2"},{"name":"ewre","id":"3"}];
这里定义一个简单的json
运行时代码顺序如下:
let html=htl.html`<div><p>ewcx</p><p>ferw</p></div>`
let data=[{"name":"xd","id":"1"},{"name":"xddfe","id":"2"},{"name":"ewre","id":"3"}];
d3.select(html).selectAll("p").data(data).text(d=>${d.id}-${d.name}).filter((d,i)=>i>1).style("color","red");