公司内部分享——D3.js的简单使用

本篇是入门中的入门,甚至不会涉及svg,因为d3并不会帮我们去屏蔽svg和canvas的相关知识,只是让你更好的控制它们,所以为了快速了解d3的使用,这里用dom做渲染。

一、概述

官方定义:

D3 (或者叫 D3.js )是一个基于 web 标准的 JavaScript 可视化库. D3 可以借助 SVG, Canvas 以及 HTML 将你的数据生动的展现出来. D3 结合了强大的可视化交互技术以及数据驱动 DOM 的技术, 让你可以借助于现代浏览器的强大功能自由的对数据进行可视化。

个人初显理解:

  1. d3数据可视化工具库,使用很像jQuery
  2. d3在v4.0后api变化很大 v3.0 vs v4.0 ,市面上的资料大多以3.0为主,给初学者系统学习d3造成不小的障碍。
  3. 相比通过配置完成工作的可视化库使用会复杂很多,需要具备svg,canvas和图形相关的知识;相对的优点是实现图表会更多样。

资料

github api文档 内容结构参照

二、hello d3

<p></p
<p></p
复制代码
let p = d3.select("body")
	.selectAll("p")
	
p.text("Hello World")
复制代码

在线演示 demo1_p2_hello_d3.html

三、选择元素与绑定数据

1.其实d3选中元素和jQuery很相似。

d3主要通过 select , selectAll 实现选择元素,参照原生js的 querySelector querySelectorAll 和上面的"hello d3"的案例就可以知道它们的用法和区别。

d3是支持连缀操作的,当你选中元素后可以直接去更改它们

d3.select('p').style('background', 'yellow')
d3.selectAll('p').style('background', 'yellow') //不需要遍历,直接对整体进行操作
复制代码

2.当我们需要在当前dom中append一个子元素时,append返回的不是当前dom,而是子元素

d3.select('p').append('span').text('I am in span') //文本添加在span
复制代码

3.insert(newElement, targetElement) 返回插入的元素

<p>p1</p>
<p id="target">target</p>
<p>p2</p>
复制代码
d3.select('body').insert('p', '#target').text('I am new here').style('color', 'pink')
复制代码

新的p会被插到target前面

4.remove删除元素

d3.select('body').select('#target').remove() //先选中然后直接remove
复制代码

5.一些常用的修改dom样式,属性和内容的api

attr,style,text 看名字其实就知道,attr常用来修改svg节点的属性, 这用attr做个案例

d3.selectAll('p').text((d, i) => {
    if (i===2){
        d3.select(this).attr('class', 'new') //this为html
    }
    return d
})
复制代码

demo1_p2_hello_d3.html

3.选中的dom和数据一一绑定

<ul id="list">
    <li></li>
    <li></li>
    <li></li>
</ul>
复制代码
let dataset = ['javascript', 'css', 'html']
d3.select('#list').selectAll('li').data(dataset).text((d, i) => i+ ' : ' + d)
复制代码

但是,我们这里li和数据的数量是相同,当不同的时候怎么办,这就需要理解d3的数据驱动思想

在线demo: demo2_p3_selectDom.html

四、update,enter与exit

例子一:update和enter:update和enter:数组[3,6,9,12,15]绑定到三个<p>上。可以想象到,数组的最后两个元素没有可以绑定的元素,这时d3会建立两个空的元素与数组最后的两个数据相对于,那么这部分就称为Enter。而有元素与数据对应的部分就称为Update

例子二:exit:如果数组[3]绑定到三个<p>上,可以想象,最后两个<p>没有可绑定的数据,那么没有数据绑定的部分就称为Exit

在线demo: demo3_p4_data_state.html

(这节部分非原创,网上看到,讲的比官网还清楚,不过它也不是原创的,就不发地址了)

五、做一个简单的柱状图

用dom渲染一个横板柱状图,非常简单

div, p {margin: 0;}
#bar-wrapper{
    width: 500px;
    height: 500px;
    background: rgba(0,0,0,0.2);
    position: relative;
}
p {
    position: absolute;
    line-height: 50px;
    text-align: right;
    color: #fff;
}
复制代码
<div id="bar-wrapper"></div>
复制代码
const dataset = [300, 280, 450, 90, 150]
const padding = 30
const height = 50

d3.select('#bar-wrapper').selectAll('p').data(dataset).enter().append('p')
.style('left', 0) //这步其实可以放在css中,但是为了体验画柱状图的思想就放在这边,类比用rect中的x属性
.style('top', (d, i) => {
	return (i+1)* (padding + height) + 'px'
}) //类比y
.style('width', (d, i) => {
	return d+ 'px'
}).style('height', height+ 'px')
.style('background', 'red')
.text(d => d)
复制代码

本人在日常开发时用svg渲染图表比较多。在线demo: demo4_p5_draw_bar_by_dom.html

六、未完待续

其实学完这些还不算把d3的常用的基础概念学完,还有比例尺,坐标轴,svg的使用,常用图形的画法,才算是真正入门,本人自己也刚学d3,随着知识丰富会不断更新,如有错误欢迎评论指出。

附上结合上述知识的一个demo:demo5_p6_drawRectAndAxis.html

我来评几句
登录后评论

已发表评论数()

相关站点

+订阅
热门文章