交互式數據可視化－D3.js（五）過渡

張紅新發布于2019-08-02 11:53 / 2562人閱讀

摘要：設置過渡屬性會對每個選中的元素進行調用，并依次傳入當前綁定元素的數據設置過渡樣式設置樣式插值過渡開始時將文本設置為值將屬性按照插值進行過渡。和都是用此函數實現的在使用過渡時是對于選擇集自身的元素來說的，選擇集的子元素不受影響。

過渡

過渡效果的起始狀態和目標狀態都很明確，指定之后元素會從起始狀態過渡為目標狀態。初始化一個過渡效果，有如下幾個方法：
var tran = d3.transition() - 創建一個過渡對象

tran.delay() - 設置延時時間，過渡經過一段時間后才會開始

tran.duration() - 設定過渡的持續時間

tran.ease() - 設定過渡的樣式。

tran.attr() - 設置過渡屬性

tran.attrTween(name[, factory]) - factory會對每個選中的元素進行調用，并依次傳入當前綁定元素的數據

tran.style() - 設置過渡樣式;

tran.styleTween() - 設置樣式插值

tran.text("value") - 過渡開始時將文本設置為value值

tran.tween(name[, factory]) - 將屬性name按照factory插值進行過渡。attrTween和styleTween都是用此函數實現的

在使用過渡時是對于選擇集自身的元素來說的，選擇集的子元素不受影響。如要使用子元素需要使用d3的選擇集，

tran.select() - 符合選擇器的第一個子元素進行過渡

tran.selectAll() - 符合選擇器的所有子元素進行過渡

tran.filter() - 過濾器與selection.filter()類似

tran.each(function) - 為過渡中的每個選中的元素調用指定的 function, 等價于 selection.each。

大致是使用方法如下：

var dataset = [100, 100, 100]
var svg = d3.select("#transition").append("svg").attr("width", 400).attr("height", 300);
var g = svg.append("g")
var drawRect = g.selectAll("rect").data(dataset).enter().append("rect")
drawRect.attr("fill", "#333").attr("x", 10).attr("y", function(d, i){
    return (i * 35) + 10
}).attr("width", 100).attr("height", 30);
var rectTran = g.transition().select("rect").delay(500).duration(1000).attr("width", 300)

GPU云服務器云服務器 d3.js數據可視化實戰大數據可視化 d3.js d3.js數據可視化實戰手冊交互式數據可視化

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

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

交互式數據可視化－D3.js（五）過渡

摘要：設置過渡屬性會對每個選中的元素進行調用，并依次傳入當前綁定元素的數據設置過渡樣式設置樣式插值過渡開始時將文本設置為值將屬性按照插值進行過渡。和都是用此函數實現的在使用過渡時是對于選擇集自身的元素來說的，選擇集的子元素不受影響。過渡過渡效果的起始狀態和目標狀態都很明確，指定之后元素會從起始狀態過渡為目標狀態。初始化一個過渡效果，有如下幾個方法：var tran = d3.transi...

URLOS 2019-08-23 12:44 評論0 收藏0
聲明式與響應式——前端新一代數據可視化方案

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

xuhong 2019-08-20 12:34 評論0 收藏0
2018年最佳JavaScript數據可視化和圖表庫

摘要：它有什么圖表加粗文字如何使用這個圖表庫可以通過存儲庫下載或通過包管理器安裝。數據可以直接從文件加載到圖表中。它有什么圖表如何使用該庫可在包管理器和他們自己的內容傳送網絡中使用。該庫專為風格的數據可視化而設計，提供一系列高度可配置的圖表。現在有很多圖表庫，但哪一個最好用？這可能取決于許多因素，如業務需求，數據類型，圖表本身的目的等等。在本文中，每個JavaScript圖表庫將與一些關鍵...

terasum 2019-08-02 11:51 評論0 收藏0
2018年最佳JavaScript數據可視化和圖表庫

摘要：它有什么圖表加粗文字如何使用這個圖表庫可以通過存儲庫下載或通過包管理器安裝。數據可以直接從文件加載到圖表中。它有什么圖表如何使用該庫可在包管理器和他們自己的內容傳送網絡中使用。該庫專為風格的數據可視化而設計，提供一系列高度可配置的圖表。現在有很多圖表庫，但哪一個最好用？這可能取決于許多因素，如業務需求，數據類型，圖表本身的目的等等。在本文中，每個JavaScript圖表庫將與一些關鍵...

dreambei 2019-08-29 17:08 評論0 收藏0
2018年最佳JavaScript數據可視化和圖表庫

摘要：它有什么圖表加粗文字如何使用這個圖表庫可以通過存儲庫下載或通過包管理器安裝。數據可以直接從文件加載到圖表中。它有什么圖表如何使用該庫可在包管理器和他們自己的內容傳送網絡中使用。該庫專為風格的數據可視化而設計，提供一系列高度可配置的圖表。現在有很多圖表庫，但哪一個最好用？這可能取決于許多因素，如業務需求，數據類型，圖表本身的目的等等。在本文中，每個JavaScript圖表庫將與一些關鍵...

archieyang 2019-08-23 12:36 評論0 收藏0