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

URLOS 發(fā)布于2019-08-23 12:44 / 2533人閱讀

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

過(guò)渡

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

tran.delay() - 設(shè)置延時(shí)時(shí)間，過(guò)渡經(jīng)過(guò)一段時(shí)間后才會(huì)開(kāi)始

tran.duration() - 設(shè)定過(guò)渡的持續(xù)時(shí)間

tran.ease() - 設(shè)定過(guò)渡的樣式。

tran.attr() - 設(shè)置過(guò)渡屬性

tran.attrTween(name[, factory]) - factory會(huì)對(duì)每個(gè)選中的元素進(jìn)行調(diào)用，并依次傳入當(dāng)前綁定元素的數(shù)據(jù)

tran.style() - 設(shè)置過(guò)渡樣式;

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

tran.text("value") - 過(guò)渡開(kāi)始時(shí)將文本設(shè)置為value值

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

在使用過(guò)渡時(shí)是對(duì)于選擇集自身的元素來(lái)說(shuō)的，選擇集的子元素不受影響。如要使用子元素需要使用d3的選擇集，

tran.select() - 符合選擇器的第一個(gè)子元素進(jìn)行過(guò)渡

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

tran.filter() - 過(guò)濾器與selection.filter()類(lèi)似

tran.each(function) - 為過(guò)渡中的每個(gè)選中的元素調(diào)用指定的 function, 等價(jià)于 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)

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/98973.html

相關(guān)文章

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

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

張紅新 2019-08-02 11:53 評(píng)論0 收藏0
聲明式與響應(yīng)式——前端新一代數(shù)據(jù)可視化方案

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

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

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

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

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

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

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

archieyang 2019-08-23 12:36 評(píng)論0 收藏0