可視化工具D3.js教程 入門 (第九章)—— 讓圖表動起來

来源:https://www.cnblogs.com/zhinian-/archive/2020/04/02/12605170.html
-Advertisement-
Play Games

在為圖標增加動畫之前,應該瞭解幾個新的 api 如下 d3.transition() 開啟一個動畫過渡。 transition.duration() 指定每個元素的持續時間(以毫秒為單位)。 transition.delay() 指定每個元素的延遲時間(以毫秒為單位) 更詳細的api講解 請戳這裡! ...


在為圖標增加動畫之前,應該瞭解幾個新的 api 如下

  d3.transition()  開啟一個動畫過渡。

  transition.duration()  指定每個元素的持續時間(以毫秒為單位)。

  transition.delay()  指定每個元素的延遲時間(以毫秒為單位)

  更詳細的api講解 請戳這裡!

 

 代碼:

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://d3js.org/d3.v5.min.js"></script>
</head>
<body>

    <svg width="500" height="400"></svg>

</body>

<script>

    var data = [90,75,12,36,54,88,24,66];
    var margin = 30;//svg 上下左右邊距

    var svg = d3.select('svg');
    var width = svg.attr('width');
    var height = svg.attr('height');

    //創建分組
    var g = svg.append('g').attr('transform','translate('+ margin +','+ margin +')');

    //定義 x y 軸比例尺
    var scaleX = d3.scaleBand()
        .domain(d3.range(data.length))
        .range([0,width - margin*2]);
    var scaleY = d3.scaleLinear()
        .domain([0,d3.max(data)])
        .range([height - margin*2,0]);

    //繪畫 x y  軸
    var axisX = d3.axisBottom(scaleX);
    var axisY = d3.axisLeft(scaleY);

    g.append('g').attr('transform','translate(0,'+ (height - margin*2) +')').call(axisX);
    g.append('g').attr('transform','translate(0,0)').call(axisY);

    // 創建矩形分組
    var gs = g.selectAll('rect').data(data).enter().append('g');


    //繪 柱狀圖  +  過度效果
    var rectP = 40;//柱狀圖間距
    gs.append('rect')
        .attr('x',function (d,i) {
            return scaleX(i) + rectP/2;
        })
        .attr('y',function (d,i) {
//            return scaleY(d);
//            return 0;//動畫的初始狀態為0  如果是這樣的話  就像下雨的效果  柱狀圖從上往下生長
//
            var min = scaleY.domain()[0];//[0,90]
            console.log(min)//  輸出 0
            return scaleY(min);// scaleY(0) y軸比例尺 映射出來的是最大值;   這個效果 等同於return height - 2*margin;的效果
        })
        .attr('width',function (d,i) {
            return scaleX.step() - rectP;
        })
        .attr('height',function (d,i) {
//            return height - margin*2 - scaleY(d);
            return 0;//動畫的初始狀態為0
        })
        .attr('fill','pink')
        .transition()//添加過度
        .duration(2000)//動畫的持續時間  毫秒
        .delay(function (d,i) {//延遲執行
            return i*300;//每個柱子逐漸開始的效果
        })
        .attr('y',function (d,i) {
            return scaleY(d);
        })
        .attr('height',function (d,i) {
            return height - margin*2 -scaleY(d);
        });



    //繪 文字  +  過度效果

    gs.append('text')
        .attr('x',function (d,i) {
            return scaleX(i) + rectP/2;
        })
        .attr('y',function (d,i) {
//            return scaleY(d);
            return height - 2*margin; //這裡的初始化效果 同上面的矩形初始化效果一樣
        })
        .attr('dx',function (d,i) {
            return -2;
        })
        .attr('dy',function (d,i) {
            return 20;
        })
        .text(function (d,i) {
           return d;
        })
        .transition()
        .duration(2000)
        .delay(function (d,i) {
            return i*300;//300毫秒
        })
        .attr('y',function (d,i) {
           return scaleY(d);
        });


</script>

</html>

 

效果:

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • transition 代表 過度/opacity 代表 透明度/transform 代表 旋轉/1S代表1秒時間/這段代碼的意思是 該元素的透明和旋轉如果發生變化時會有1秒的過度效果。也就是漸隱漸顯,和旋轉的動畫。 transition主要包含四個屬性值:執行變換的屬性transition-prop... ...
  • 學了十幾天小程式雲開發,自己寫了個小項目練練手,本想著寫完之後發佈上線,讓別人也可以體驗該小程式,結果只有我一個人使用,真的是服了 覺得小程式還是沒有flutter,RN等原生開發來的舒服,也沒有H5混合式開法來的爽,(前提是不企業認證)也就這樣了,自己寫的項目自己欣賞吧, 下麵是失敗原因: 這原因 ...
  • 幾天持續的學習微信小程式,觀摩官方文檔,以下踩過的坑要避免了..... 1,小程式 wxml 標簽中使用 Object.keys().length 的方法失效 在 wxml 中使用了對象是否為空來作為判斷來顯示頁面信息的,而後在 js 的某個點擊事件中用官方的 setData() 方法給 data ...
  • 目前,在移動互聯網行業中較為火熱、勢頭猛烈的當屬Web前端開發。且在2019年招聘旺季中,Web前端開發程式員處於供不應求的狀態,對於0基礎想要從事互聯網行業的小伙伴們,Web前端將會是最合適的入門編程語言。而且根據後期的職業發展規劃來看,只要入門Web前端,在職場上發展個三到五年,基本上都能做到總 ...
  • 首先我們需要的是 中國地圖的json數據:請戳這裡 接下來咱們直接上代碼: 代碼: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>中國地圖</title> <script src="./d3.min.js" ...
  • 首先我們還是說下 這章要用到的知識點,我在這裡只是簡單的羅列一下,如需詳細瞭解,請戳這裡查看中文官方文檔 d3.hierarchy - 從給定的層次結構數據構造一個根節點併為各個節點指定深度等屬性. node.sum - 評估和彙總定量值. d3.tree - 創建一個新的整齊(同深度節點對齊)的樹 ...
  • 力導向圖的概念這裡就不細說了,力導向圖適合繪製關係型的信息; 下麵先來說幾個關於力導向圖的知識點: 1、d3.forceSimulation([nodes]) 創建一個新的力導向圖; 2、simulation.force(name[, force]) 如果指定了 force 則表示添加指定 name ...
  • 首先我們先梳理下 繪製餅圖之前 需要掌握的新知識: 1、d3.arc(arguments..) 生成器用來在餅圖或圓環圖中生成 圓形 或 扇形 或 環形; arguments 是任意的; 它們只是簡單地傳遞到 arc 生成器的訪問器函數的對象。例如,根據預設的設置,傳入的對象應該包含以下半徑和角度信 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...