交互式數(shù)據(jù)可視化－D3.js（五）過渡

張紅新發(fā)布于2019-08-02 11:53 / 2573人閱讀

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

過渡

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

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

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

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

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

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

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

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

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

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

在使用過渡時是對于選擇集自身的元素來說的，選擇集的子元素不受影響。如要使用子元素需要使用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)

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

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

交互式數(shù)據(jù)可視化－D3.js（五）過渡

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

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

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

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

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

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

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

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

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

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