内容简介:本篇是入门中的入门,甚至不会涉及svg,因为d3并不会帮我们去屏蔽svg和canvas的相关知识,只是让你更好的控制它们,所以为了快速了解d3的使用,这里用dom做渲染。官方定义:D3 (或者叫 D3.js )是一个基于 web 标准的 JavaScript 可视化库. D3 可以借助 SVG, Canvas 以及 HTML 将你的数据生动的展现出来. D3 结合了强大的可视化交互技术以及数据驱动 DOM 的技术, 让你可以借助于现代浏览器的强大功能自由的对数据进行可视化。
本篇是入门中的入门,甚至不会涉及svg,因为d3并不会帮我们去屏蔽svg和canvas的相关知识,只是让你更好的控制它们,所以为了快速了解d3的使用,这里用dom做渲染。
一、概述
官方定义:
D3 (或者叫 D3.js )是一个基于 web 标准的 JavaScript 可视化库. D3 可以借助 SVG, Canvas 以及 HTML 将你的数据生动的展现出来. D3 结合了强大的可视化交互技术以及数据驱动 DOM 的技术, 让你可以借助于现代浏览器的强大功能自由的对数据进行可视化。
个人初显理解:
- d3数据可视化 工具 库,使用很像jQuery
- d3在v4.0后api变化很大 v3.0 vs v4.0 ,市面上的资料大多以3.0为主,给初学者系统学习d3造成不小的障碍。
- 相比通过配置完成工作的可视化库使用会复杂很多,需要具备svg,canvas和图形相关的知识;相对的优点是实现图表会更多样。
资料
二、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
以上所述就是小编给大家介绍的《公司内部分享——D3.js的简单使用》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
A Guide to Monte Carlo Simulations in Statistical Physics
Landau, David P./ Binder, Kurt / Cambridge Univ Pr / 2005-9 / 786.00元
This new and updated edition deals with all aspects of Monte Carlo simulation of complex physical systems encountered in condensed-matter physics, statistical mechanics, and related fields. After brie......一起来看看 《A Guide to Monte Carlo Simulations in Statistical Physics》 这本书的介绍吧!