[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:有帮你封装一下图形接口 ...
随机推荐
- IDEA 开发工具在POM.XML文件中增加依赖
在POM.XML 中使用快捷键 ALT+INSERT 选择第一个,输入关键字即可 选择版本,确认,ok
- 【Mysql】经常使用指令之——忘记password
上一篇文章基本总结了下myql下通过指令怎么创建用户.详见:[Mysql]经常使用指令之--用户操作(创建,授权,改动.删除) 今天说下特殊情况,忘记password了怎么办??? 重装.删除配置等能 ...
- jquery10 闭包示例
o = { a:1, o:{ b:2, f : function(){ alert(o.a); alert(o.b);//undefined } } } o.o.f(); o = { a:7, o : ...
- Tools-->SQL Server Profiler监视数据库
http://www.cnblogs.com/lorking/p/4062787.html https://docs.microsoft.com/en-us/sql/tools/sql-server- ...
- kafka自带没web ui界面,怎么办?安装个第三方的
见 基于Web的Kafka管理器工具之Kafka-manager的编译部署详细安装 (支持kafka0.8.0.9和0.10以后版本)(图文详解)(默认端口或任意自定义端口)
- Think Pad笔记本分区解决思路及方法
Think pad笔记本分区解决思路及方法 近日好友拿着新买的Thinkpad X300过来找我,说这个笔记本只有一个分区,所有的东西不得放在C盘,希望再多分出几个分区.抱怨原先在wind ...
- ajax的使用(一)
ajax向服务器异步发送和接受数据,然后用JavaScript解析.Ajax核心规范的名称继承于你用来建立和发送请求的JavaScript对象:XMLHttpRequest.这个规范有两个等级 ...
- deep-in-es6(七)
Symbols对象 JavaScript的第七种原始类型 以前的数据类型: Undefined 未定义 Null 空值 Boolean 布尔类型 Number 数字类型 String 字符串类型 Ob ...
- PHP温习之二
1.php包含的超全局变量 (1)$GLOBALS超全局变量组,在PHP脚本所有的作用域均可以访问到. <?php $x = 23; $y = 17; function addAction(){ ...
- 【hdu 4696】Professor Tian
[Link]:http://acm.hdu.edu.cn/showproblem.php?pid=4649 [Description] 给你一个由位运算"与""或&quo ...