資訊專(zhuān)欄INFORMATION COLUMN
摘要：使用創(chuàng)建動(dòng)態(tài)圖表主要使用到了部分的，通過(guò)他們可以完成動(dòng)畫(huà)我的學(xué)習(xí)記錄是通過(guò)一個(gè)例子了解這些會(huì)動(dòng)的柱狀圖還是拿之前的例子，代碼在此完整的柱圖修改的代碼部分在于創(chuàng)建處原來(lái)的代碼加上動(dòng)畫(huà)效果后代碼如下動(dòng)畫(huà)開(kāi)始前狀態(tài)返回持續(xù)時(shí)間，是的動(dòng)畫(huà)函數(shù)，
d3js v5.9.2
使用d3創(chuàng)建動(dòng)態(tài)圖表主要使用到了d3.trasition部分的API，通過(guò)他們可以完成動(dòng)畫(huà)
我的學(xué)習(xí)記錄是通過(guò)一個(gè)例子了解這些API
還是拿之前的例子，代碼在此：完整的柱圖
修改的代碼部分在于創(chuàng)建rect處：
//原來(lái)的代碼
barContainer.append("rect")
.attr("height", d => barScale(d))
.attr("width", barWidth - 1);
加上動(dòng)畫(huà)效果后代碼如下
barContainer.append("rect")
.attr("height", 0) //動(dòng)畫(huà)開(kāi)始前狀態(tài)
.attr("width", barWidth - 1)
.transition() //selection.transition() 返回transition
.duration(1000)//持續(xù)時(shí)間
.ease(d3.easeBackInOut)//transition.ease(easing function)，easing function是d3的動(dòng)畫(huà)函數(shù)，還有很多其他api
.attr("height", d => barScale(d));//transition.attr()
？？是從上向下繪制的
這里我們可以用rect的y屬性控制動(dòng)畫(huà)，y表示矩形左上角端點(diǎn)的縱坐標(biāo)
barContainer.append("rect")
.attr("height", 0)
.attr("width", barWidth - 1)
.attr("y", d => barScale(d)) //y是相對(duì)rect父級(jí)的g容器的，頂端從底部開(kāi)始，故值設(shè)為矩形的高
.transition()
.duration(2000)
.ease(d3.easeBackInOut)
.attr("height", d => barScale(d))
.attr("y", 0);//到g容器頂部
所以過(guò)程就是矩形長(zhǎng)度向下拉伸，同時(shí)位置上移
這樣子就完成了動(dòng)畫(huà)
上面的寫(xiě)法是最簡(jiǎn)單的寫(xiě)法，但是代碼太長(zhǎng)或者同一個(gè)動(dòng)畫(huà)效果多次使用就會(huì)很冗雜，我們可通過(guò)d3.transition()獲得自定義的transition
使用也很簡(jiǎn)單
//定義transition
let t = d3.transition()
.duration(2000)
.ease(d3.easeBackInOut);
barContainer.append("rect")
.attr("height", 0)
.attr("width", barWidth - 1)
.attr("y", d => barScale(d))
.transition(t) //使用新定義的transition
.ease(d3.easeBackInOut)
.attr("height", d => barScale(d))
.attr("y", 0);
效果相同
總結(jié)d3還提供了其他常用的API，除了用到的ease()，duration()還有delay()等等
代碼在這（d3庫(kù)在build里）
第九章 讓圖表動(dòng)起來(lái)
SVG 圖像入門(mén)教程——阮一峰
selection.transition()
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/103237.html
摘要：俗話說(shuō)，不會(huì)使用工具來(lái)完成任務(wù)的都是進(jìn)化不完全的表現(xiàn)，大數(shù)據(jù)時(shí)代，可視化已經(jīng)深深鉆進(jìn)我們的生活，使用可視化工具也變的相當(dāng)普遍，今天我們來(lái)總結(jié)下當(dāng)下可視化工具都有哪些。是一個(gè)地圖庫(kù)，主要面向數(shù)據(jù)可視化用戶(hù)。 俗話說(shuō)，不會(huì)使用工具來(lái)完成任務(wù)的都是進(jìn)化不完全的表現(xiàn)，大數(shù)據(jù)時(shí)代，可視化已經(jīng)深深鉆進(jìn)我們的生活，使用可視化工具也變的相當(dāng)普遍，今天我們來(lái)總結(jié)下當(dāng)下可視化工具都有哪些。 showImg...
摘要：數(shù)據(jù)可視化圖表圖表作為數(shù)據(jù)可視化最常見(jiàn)的表現(xiàn)形式之一，往往被以偏概全的認(rèn)為圖表就是數(shù)據(jù)可視化。嚴(yán)格來(lái)說(shuō)，數(shù)據(jù)可視化應(yīng)該是連接數(shù)據(jù)與視覺(jué)的一個(gè)映射關(guān)系，將數(shù)據(jù)映射成人更容易感知其規(guī)律的可視化結(jié)果。 題目中的新一代是個(gè)相對(duì)的概念，事實(shí)上本文即將介紹的方法已經(jīng)有了生產(chǎn)環(huán)境可用的實(shí)現(xiàn)方案（這也側(cè)面佐證了其可行性），但考慮到此方法與現(xiàn)在大部分前端項(xiàng)目中所使用的數(shù)據(jù)可視化方案相比仍有一些優(yōu)勢(shì)，因此...
摘要：本篇的使用的版本為將按照簡(jiǎn)要介紹實(shí)驗(yàn)及意義進(jìn)行簡(jiǎn)要通過(guò)數(shù)據(jù)綁定創(chuàng)建，更新及銷(xiāo)毀元素，如何操作元素則是通過(guò)。 本篇blog的使用的d3版本為d3.js v5.9.2 將按照簡(jiǎn)要介紹、實(shí)驗(yàn)及意義進(jìn)行 簡(jiǎn)要 d3.js通過(guò)data join（數(shù)據(jù)綁定）創(chuàng)建，更新及銷(xiāo)毀元素，如何操作元素則是通過(guò)selection?？偨Y(jié)如下 showImg(https://segmentfault.com/...
摘要：我的目標(biāo)是，注釋個(gè)的例子。這兩句都是和相關(guān)的，所以放在一起講。區(qū)域的意思是，對(duì)于一個(gè)，和之間的部分表示此覆蓋的區(qū)域。是一個(gè)數(shù)組的輔助函數(shù)，可以返回其最小值和最大值。的映射是，，最大值，也就是的最低和最高。 我的目標(biāo)是，注釋100個(gè)d3.js的例子。 可能是史上最詳細(xì)的 。 Area Chart是Basic Charts里的第一個(gè)例子。 解析 1 var margin = {top...
摘要：在本教程中，我們將探討如何使用和構(gòu)建實(shí)時(shí)圖形。通過(guò)方法監(jiān)聽(tīng)輪詢(xún)更新，并在收到更新后使用最新數(shù)據(jù)調(diào)用函數(shù)，以便重新呈現(xiàn)圖形。 首先你需要在計(jì)算機(jī)上安裝Node和npm。 數(shù)據(jù)的可視化表示是傳遞復(fù)雜信息的最有效手段之一，D3.js提供了創(chuàng)建這些數(shù)據(jù)可視化的強(qiáng)大工具和靈活性。 D3.js是一個(gè)JavaScript庫(kù)，用于使用SVG，HTML和CSS在Web瀏覽器中生成動(dòng)態(tài)的交互式數(shù)據(jù)可視化。...
閱讀 3909·2021-11-24 09:38
閱讀 3247·2021-11-15 11:37
閱讀 864·2021-11-12 10:36
閱讀 3621·2021-10-21 09:38
閱讀 3300·2021-09-28 09:36
閱讀 2503·2021-09-22 16:01
閱讀 5153·2021-09-22 15:09
閱讀 1311·2019-08-30 15:55
