d3.js 動態圖表

Cc_2011 發布于2019-08-23 16:45 / 2970人閱讀

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

d3js v5.9.2
使用d3創建動態圖表主要使用到了d3.trasition部分的API，通過他們可以完成動畫
我的學習記錄是通過一個例子了解這些API

會動的柱狀圖

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

修改的代碼部分在于創建rect處：

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

加上動畫效果后代碼如下

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

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

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

效果相同

總結

d3還提供了其他常用的API，除了用到的ease()，duration()還有delay()等等
代碼在這（d3庫在build里）

參考資料

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

GPU云服務器云服務器 d3.js 動態添加節點 d3.js 動態數據表格動態數據圖表+JS 動態數據圖表 JS

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/103237.html

常用的數據可視化工具

摘要：俗話說，不會使用工具來完成任務的都是進化不完全的表現，大數據時代，可視化已經深深鉆進我們的生活，使用可視化工具也變的相當普遍，今天我們來總結下當下可視化工具都有哪些。是一個地圖庫，主要面向數據可視化用戶。俗話說，不會使用工具來完成任務的都是進化不完全的表現，大數據時代，可視化已經深深鉆進我們的生活，使用可視化工具也變的相當普遍，今天我們來總結下當下可視化工具都有哪些。 showImg...

philadelphia 2019-08-22 11:06 評論0 收藏0
聲明式與響應式——前端新一代數據可視化方案

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

xuhong 2019-08-20 12:34 評論0 收藏0
d3數據綁定與selection實踐

摘要：本篇的使用的版本為將按照簡要介紹實驗及意義進行簡要通過數據綁定創建，更新及銷毀元素，如何操作元素則是通過。本篇blog的使用的d3版本為d3.js v5.9.2 將按照簡要介紹、實驗及意義進行簡要 d3.js通過data join（數據綁定）創建，更新及銷毀元素，如何操作元素則是通過selection。總結如下 showImg(https://segmentfault.com/...

Tangpj 2019-08-26 13:38 評論0 收藏0
注釋！注釋！(1) - Area Chart

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

Java3y 2019-08-19 17:57 評論0 收藏0
使用D3.js構建實時圖形

摘要：在本教程中，我們將探討如何使用和構建實時圖形。通過方法監聽輪詢更新，并在收到更新后使用最新數據調用函數，以便重新呈現圖形。首先你需要在計算機上安裝Node和npm。數據的可視化表示是傳遞復雜信息的最有效手段之一，D3.js提供了創建這些數據可視化的強大工具和靈活性。 D3.js是一個JavaScript庫，用于使用SVG，HTML和CSS在Web瀏覽器中生成動態的交互式數據可視化。...

Ryan_Li 2019-08-23 11:31 評論0 收藏0