d3.js是一个javascript库操纵文档基于数据。d3帮助你把数据使用html、svg和css。d3强调web标准给你完整的现代浏览器的功能没有把自己专有的框架,结合强大的可视化组件和数据驱动的dom操作方法。
d3是一个专门处理2d场景的数据可视化的库
社区已经存在大量处理数据可视化的js库,为何还要学习d3呢?
类似echarts,highcharts这些高度封装好的库,已经可以很好的在pc和移动设备上运行,兼容当前绝大部分浏览器,将常见的一些柱状图,饼图,折线图等已经很好的封装,开发者不需要做太多事情即可直接拿来使用
当开发过程中遇到一些需要个性化展示的可视化需求时,类似echarts,highcharts这类库并不能很好支持,此时便需要更加灵活的d3,d3就像是一只画笔,可以让你自由的在浏览器上发挥你的智慧和才能,让你更好的自由发挥
d3可以提供很好的自由度,也意味着其上手难度和学习成本等是高于echarts这类配置化的可视化库,至于在项目中选择哪个库,需要结合项目需求、组员能力等情况
几个常见可视化库npm对比
如何学习d3呢?
其实无论从零学习何种技术,作为普通基层码农无非就看视频、官方文档和相关的文档这几个主要渠道,若是身边有相关的大神便能事半功倍了
接下来就是从万能的hello word开始吧
在页面中创建一个空的h1标签,然后通过d3将h1的内容修改为hello word
<h1></h1><script type="text/javascript"> window.onload = function () { // 获取h1的dom, 将其内容替换为 hello word const h = d3.lect('h1').text('hello word') // 将h1标签的字体颜色和大小修改 h .style('color', 'blue') .style('font-size', '40px') 领导评价 };</script>
使用d3编写一个hello word就是这么简单.整体的使用感觉是不是很类似古老的jq
绑定数据是d3中一个比较独特的功能,能将数据绑定到dom上
主要通过两个函数来绑定数据
datum(): 绑定到一个数据到选择元素上data(): 绑定一个数组到选择元素上,数组的各项值分别与选择元素的各元素绑定,相对于datum比较常用使用datum 绑定数据<h1></h1><h1></h1><h1></h1><script type="text/javascript"> window.onload = function () { 河南985// 获取h1的dom选择集 d3.lectall("h1") .datum("datum bind data") .text((data, index) => { // data 是 datum 绑定的数据, index 是选择元素对应的索引 // return 的数据 才是页面上选择元素内展示的内容 return `${data} ${index}` }); };</script>
页面上三个h1标签分别显示为
datum bind data 0datum bind data 1datum b北京语言大学是211还是985ind data 2
使用data 绑定数据<h1></h1><h1></h1><h1></h1><script type="text/javascript"> window.onload = function () { // 定义一个data绑定数据的数组 const arr = ['苹果', '香蕉', '西瓜'] // 获取h1的dom选择集 d3.lectall("h1") .data(arr) // 将arr中的数据 分别绑定到h1选择集中对应的数据 .text((data, index) => { // data 是 datum 绑定的数据, index 是选择元素对应的索引 // return 的数据 才是页面上选择元素内展示的内容 return data }); };</script>
页面上三个h1标签分别显示为
苹果香蕉西瓜
需要注意的是: 若是arr的数量小于h1的数据集数量,此时超过arr长度的元素中则显示其标签内原有的数据
已经讲解了 lect 和 lectall,以及选择集的概念。本节具体讲解这两个函数的用法。
假设在 body 中有三个段落元素:
<p>apple</p><p>pear</p><p>banana</p>
现在,要分别完成以下四种选择元素的任务。
t("p");p1.style("cwww 4 4 k k d c 0 molor","red");
var p = body.lectall("p");p.style("color","red");
有不少方法,一种比较简单的是给第二个元素添加一个 id 号。
pear
然后,使用 lect 选择元素,注意参数中 id 名称前要加 # 号。
var p2 = body.lect("#myid");p2.style("color","red");
给后两个元素添加 class,
<p class="myclass">pear</p><p class="myclass">banana</p>
由于需要选择多个元素,要用 lectall。注意参数,class 名称前要加一个点。
var p = body.lectall(".myclass");p.style("color","red");
插入元素涉及的函数有两个:
append():在选择集末尾插入元素inrt():在选择集前面插入元素假设有三个段落元素,与上文相同。
append()
body.append("p") .text("append p element");
在 body 的末尾添加一个 p 元素,结果为:
applepearbananaappend p element
inrt()
在 body 中 id 为 myid 的元素前添加一个段落元素。
body.inrt("p","#myid") .text("inrt p element");
已经指定了 pear 段落的 id 为 myid,因此结果如下。
appleinrt p elementpearbanana
删除一个元素时,对于选择的元素,使用 remove 即可,例如:
var p = body.lect("#myid");p.remove();
本文发布于:2023-04-05 10:27:18,感谢您对本站的认可!
本文链接:https://www.wtabcd.cn/fanwen/zuowen/a3c4f3e91ee08194dc42dfa16feca440.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文word下载地址:js设置字体颜色代码(文字颜色和内容的方法).doc
本文 PDF 下载地址:js设置字体颜色代码(文字颜色和内容的方法).pdf
留言与评论(共有 0 条评论) |