[D3] Animate Chart Axis Transitions in D3 v4
When the data being rendered by a chart changes, sometimes it necessitates a change to the scales and axes of the chart as well. This lesson demonstrates how to animate and synchronize axis transitions on a column chart.
var svg = d3.select('.chart')
.append('svg')
.attr('width', width + margin.left + margin.right)
.attr('height', height + margin.top + margin.bottom)
.call(responsivefy)
.append('g')
.attr('transform', 'translate(' + margin.left + ', ' + margin.top + ')');
/**
* Y axis
*/
const yScale = d3.scaleLinear()
.domain([
,
])
.range([height, ]);
const yAxis = svg
.append('g')
.call(d3.axisLeft(yScale)); /**
* x axis
*/
const xScale = d3.scaleBand()
.domain(data.map(d => d.name))
.range([, width])
.padding(0.2);
const xAxis = d3.axisBottom(xScale).tickSize().tickPadding();
svg.append('g')
.attr('transform', `translate(, ${height})`)
.call(xAxis)
.selectAll('text')
.attr('text-anchor', 'end')
.attr('transform', 'rotate(-45)'); // enter: which in the data, but not yet on the page
// upate: which in the data, and also in the page
// exit: which not in the data, but exist on the page
// end function render(subject = 'math') { // Define a resuable transation variable
var t = d3.transition().duration(); var update = svg.selectAll('rect')
.data(data.filter(d => d[subject]), d => d.name); //d => d.name is a uniq idientifier // First: we want to remove the existing object which doesn't have any value
// Get rid of null value object
// Also animation y and height attr to produce
// fade out effect
update
.exit()
.transition(t)
.attr('y', height)
.attr('height', )
.remove(); // Update the y axis with animation
yScale.domain(
[, d3.max(data, d => d[subject])]
);
yAxis
.transition(t)
.delay()
.call(d3.axisLeft(yScale)); // Second, we want to animate the existing elements height
update
.transition(t)
.delay()
.attr('y', d => yScale(d[subject]))
.attr('height', d => height - yScale(d[subject])); // Last, for the new data which is not in the page before
// We want to animate
update
.enter()
.append('rect')
.attr('y', height)
.attr('height', )
.attr('x', d => xScale(d.name))
.attr('width', d => xScale.bandwidth())
.transition(t)
.delay(update.exit().size() ? : ) // If page refresh, we don't want to wait 2000ms
.attr('y', d => yScale(d[subject]))
.attr('height', d => height - yScale(d[subject]));
} render();
[D3] Animate Chart Axis Transitions in D3 v4的更多相关文章
- [D3] Animate Transitions in D3 v4
D3 makes it easy to add meaningful animations to your data visualizations. Whether it’s fading in ne ...
- [D3] Create Chart Axes with D3 v4
Most charts aren’t complete without axes to provide context and labeling for the graphical elements ...
- [D3] Reuse Transitions in D3 v4
D3 transitions start executing as soon as they’re created, and they’re destroyed once they end. This ...
- [D3] Build a Scatter Plot with D3 v4
Scatter plots, sometimes also known as bubble charts, are another common type of visualization. They ...
- d3 - bar chart
用 D3.js 做一个简单的柱形图. 做柱形图有很多种方法,比如用 HTML 的 div 标签,或用 svg . 推荐用 SVG 来做各种图形.SVG 意为可缩放矢量图形(Scalable Vecto ...
- [D3] Animate with the General Update Pattern in D3 v4
In D3, the General Update Pattern is the name given to what happens when a data join is followed by ...
- [D3] 12. Basic Transitions with D3
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- [D3] Load and Inspect Data with D3 v4
You probably use a framework or standalone library to load data into your apps, but what if that’s o ...
- d3可视化实战02:理解d3数据驱动的真正含义
前文中已经提到,SVG从诞生之初起就可以非常方便地使用javascript脚本语言来进行其DOM对象的控制.当然,控制的方法有很多,有直接控制SVG对象的方法,例如使用原生js:有帮你封装一下图形接口 ...
随机推荐
- 比JLRoutes更强大更好用的iOS开源路由框架—FFRouter
目前iOS常用路由框架是JLRouter.HHRouter.MGJRouter. 但是这些路由库都各有不足,首先是JLRouter,用不到的功能繁多,而且基于遍历查找URL,效率低下.HHRouter ...
- Java 学习(13):抽象类& 抽象方法& 封装
目录 --- 抽象类 --- 封装 抽象类: 在面向对象的概念中,所有的对象都是通过类来描绘的,但是反过来,并不是所有的类都是用来描绘对象的,如果一个类中没有包含足够的信息来描绘一个具体的对象,这样的 ...
- hdu(2859)——Phalanx(dp)
题意: 如今有一个n*n的矩阵,然后每一个格子中都有一个字母(大写或小写组成).然后询问你如今最大的对称子矩阵的边长是多少.注意这里的对角线是从左下角到右上角上去的. 思路: 这道题我自己写出了dp的 ...
- PipeCAD之管道标准库PipeStd
PipeCAD之管道标准库PipeStd eryar@163.com Key Words. PipeCAD, PipeStd, 管道设计软件,管件库 1. Introduction 前不久,两位老友徐 ...
- sdut 2805(最小生成树)
大家快来A水题 Time Limit: 1000MS Memory limit: 65536K 题目描写叙述 (1<= N <=2000)(1<= M <= N*(N-1)/2 ...
- Unable to find required classes (javax.activation.DataHandler and javax.mail.internet.MimeMultipart). Attachment support is disa
转自:https://blog.csdn.net/ouyangtianhan/article/details/6797999 Unable to find required classes (java ...
- Ajax的跨域问题分析
一.Ajax的跨域问题 Ajax是利用javascript内置XMLHttpRequest对象来进行传输的,所以它依赖于XMLHttpRequest对象,而XMLHttpRequest对象却有很多的限 ...
- XHTML是什么?XHTML与HTML的区别
经常看到web前端开发人员口中提到XHTML,相信很多web前端开发的新手们感到很疑惑,甚至有些时候认为XHTML就是HTML,这个观点是错误的,今天零度就给大家好好说道说道XHTML和HTML的区别 ...
- Vagrant 和 docker
Docker应用实践 http://dockerone.com/article/146 Vagrant 适合用来管理虚拟机,而docker适合用来管理应用环境 http://www.linuxidc. ...
- 初识Oracle中的正则表达式
Oracle使用正则表达式离不开这4个函数: 1.regexp_like 2.regexp_substr 3.regexp_instr 4.regexp_replace