成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

d3.js 動態(tài)圖表

Cc_2011 / 2993人閱讀

摘要：使用創(chuàng)建動態(tài)圖表主要使用到了部分的，通過他們可以完成動畫我的學(xué)習(xí)記錄是通過一個(gè)例子了解這些會動的柱狀圖還是拿之前的例子，代碼在此完整的柱圖修改的代碼部分在于創(chuàng)建處原來的代碼加上動畫效果后代碼如下動畫開始前狀態(tài)返回持續(xù)時(shí)間，是的動畫函數(shù)，

d3js v5.9.2
使用d3創(chuàng)建動態(tài)圖表主要使用到了d3.trasition部分的API，通過他們可以完成動畫
我的學(xué)習(xí)記錄是通過一個(gè)例子了解這些API

會動的柱狀圖

還是拿之前的例子，代碼在此：完整的柱圖

修改的代碼部分在于創(chuàng)建rect處：

//原來的代碼
barContainer.append("rect")
    .attr("height", d => barScale(d))
    .attr("width", barWidth - 1);

加上動畫效果后代碼如下

barContainer.append("rect")
    .attr("height", 0) //動畫開始前狀態(tài)
    .attr("width", barWidth - 1)
    .transition() //selection.transition() 返回transition
    .duration(1000)//持續(xù)時(shí)間
    .ease(d3.easeBackInOut)//transition.ease(easing function)，easing function是d3的動畫函數(shù)，還有很多其他api
    .attr("height", d => barScale(d));//transition.attr()

？？是從上向下繪制的
這里我們可以用rect的y屬性控制動畫，y表示矩形左上角端點(diǎn)的縱坐標(biāo)

barContainer.append("rect")
    .attr("height", 0)
    .attr("width", barWidth - 1)
    .attr("y", d => barScale(d)) //y是相對rect父級的g容器的，頂端從底部開始，故值設(shè)為矩形的高
    .transition()
    .duration(2000)
    .ease(d3.easeBackInOut)
    .attr("height", d => barScale(d))
    .attr("y", 0);//到g容器頂部

所以過程就是矩形長度向下拉伸，同時(shí)位置上移


這樣子就完成了動畫

更簡潔的寫法

上面的寫法是最簡單的寫法，但是代碼太長或者同一個(gè)動畫效果多次使用就會很冗雜，我們可通過d3.transition()獲得自定義的transition
使用也很簡單

//定義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庫在build里）

參考資料

第九章 讓圖表動起來
SVG 圖像入門教程——阮一峰
selection.transition()

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/103237.html

相關(guān)文章

  • 常用的數(shù)據(jù)可視化工具

    摘要：俗話說，不會使用工具來完成任務(wù)的都是進(jìn)化不完全的表現(xiàn)，大數(shù)據(jù)時(shí)代，可視化已經(jīng)深深鉆進(jìn)我們的生活，使用可視化工具也變的相當(dāng)普遍，今天我們來總結(jié)下當(dāng)下可視化工具都有哪些。是一個(gè)地圖庫，主要面向數(shù)據(jù)可視化用戶。 俗話說，不會使用工具來完成任務(wù)的都是進(jìn)化不完全的表現(xiàn)，大數(shù)據(jù)時(shí)代，可視化已經(jīng)深深鉆進(jìn)我們的生活，使用可視化工具也變的相當(dāng)普遍，今天我們來總結(jié)下當(dāng)下可視化工具都有哪些。 showImg...

    philadelphia 評論0 收藏0

  • 聲明式與響應(yīng)式——前端新一代數(shù)據(jù)可視化方案

    摘要：數(shù)據(jù)可視化圖表圖表作為數(shù)據(jù)可視化最常見的表現(xiàn)形式之一，往往被以偏概全的認(rèn)為圖表就是數(shù)據(jù)可視化。嚴(yán)格來說，數(shù)據(jù)可視化應(yīng)該是連接數(shù)據(jù)與視覺的一個(gè)映射關(guān)系，將數(shù)據(jù)映射成人更容易感知其規(guī)律的可視化結(jié)果。 題目中的新一代是個(gè)相對的概念，事實(shí)上本文即將介紹的方法已經(jīng)有了生產(chǎn)環(huán)境可用的實(shí)現(xiàn)方案（這也側(cè)面佐證了其可行性），但考慮到此方法與現(xiàn)在大部分前端項(xiàng)目中所使用的數(shù)據(jù)可視化方案相比仍有一些優(yōu)勢，因此...

    xuhong 評論0 收藏0

  • d3數(shù)據(jù)綁定與selection實(shí)踐

    摘要：本篇的使用的版本為將按照簡要介紹實(shí)驗(yàn)及意義進(jìn)行簡要通過數(shù)據(jù)綁定創(chuàng)建，更新及銷毀元素，如何操作元素則是通過。 本篇blog的使用的d3版本為d3.js v5.9.2 將按照簡要介紹、實(shí)驗(yàn)及意義進(jìn)行 簡要 d3.js通過data join（數(shù)據(jù)綁定）創(chuàng)建，更新及銷毀元素，如何操作元素則是通過selection?？偨Y(jié)如下 showImg(https://segmentfault.com/...

    Tangpj 評論0 收藏0

  • 注釋！注釋！(1) - Area Chart

    摘要：我的目標(biāo)是，注釋個(gè)的例子。這兩句都是和相關(guān)的，所以放在一起講。區(qū)域的意思是，對于一個(gè)，和之間的部分表示此覆蓋的區(qū)域。是一個(gè)數(shù)組的輔助函數(shù)，可以返回其最小值和最大值。的映射是，，最大值，也就是的最低和最高。 我的目標(biāo)是，注釋100個(gè)d3.js的例子。 可能是史上最詳細(xì)的 。 Area Chart是Basic Charts里的第一個(gè)例子。 解析 1 var margin = {top...

    Java3y 評論0 收藏0

  • 使用D3.js構(gòu)建實(shí)時(shí)圖形

    摘要：在本教程中，我們將探討如何使用和構(gòu)建實(shí)時(shí)圖形。通過方法監(jiā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庫，用于使用SVG，HTML和CSS在Web瀏覽器中生成動態(tài)的交互式數(shù)據(jù)可視化。...

    Ryan_Li 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<