526互联

d3学习-

发布时间 2023-09-28 07:27:31作者: matthew's_follower

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

ewcx

ferw

点击查看代码 
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");