D3.js 第九課 讓圖表動起來
D3 支援 “製作動態的圖表”
有時候，讓使用者看清楚圖表的 緩慢變化的過程，能給使用者不小的友好感。
什麼是動態效果
靜態的圖表：一蹴而就地出現，繪製完成後 不再發生變化
動態的圖表：是指圖表在某一時間段會發生某種變化，可能是形狀、顏色、位置等，而且使用者是可以看到變化的過程的。
例如；一個圓，圓心為 (100, 100)。我們希望圓的 x 座標從 100 移到 300，並且移動過程在是在2 秒內發生。
這個時候就需要用到動態效果，在 D3 裡我們稱之為過渡（transition）。
實現動態的方法
D3 提供了 4 個方法用於實現圖形的過渡：從狀態 A 變為狀態 B。
transition()
啟動過渡效果。
“”其前後“”是“”圖形變化前後“”的狀態（形狀、位置、顏色等等）
例如：
.attr("fill","red") //初始顏色為紅色
.transition() //啟動過渡
.attr("fill","steelblue") //終止顏色為鐵藍色D3 會自動對兩種顏色（紅色和鐵藍色）之間的顏色值（RGB值）進行插值計算，得到過渡用的顏色值，
我們無需知道中間是怎麼計算的，只需要享受結果即可。
duration()
指定過渡的持續時間，單位為毫秒。
如 duration(2000) ，指持續 2000 毫秒，即 2 秒。
ease()
指定過渡的方式
常用有：
- linear：普通的線性變化
- circle：慢慢地到達變換的最終狀態
- elastic：帶有彈跳的到達最終狀態
- bounce：在最終狀態處彈跳幾次
呼叫時，格式形如： ease(“bounce”)。
delay()
指定延遲的時間
表示一定時間後才開始轉變，單位同樣為毫秒。
此函式可以對整體指定延遲，也可以對個別指定延遲。
例如，對整體指定時：
.transition()
.duration(1000)
.delay(500)因此，圖形整體在延遲 500 毫秒後發生變化，變化的時長為 1000 毫秒。因此，過渡的總時長為1500毫秒。
例如，對一個 個體圖形（圖形上綁定了資料）進行指定時：
.transition()
.duration(1000)
.delay(funtion(d,i){
return 200*i;
})如此，假設有 10 個元素，那麼第 1 個元素延遲 0 毫秒（因為 i = 0），第 2 個元素延遲 200 毫秒，第 3 個延遲 400 毫秒，依次類推….整個過渡的長度為 200 * 9 + 1000 = 2800 毫秒。
實現簡單的動態效果
在 SVG 畫布裡新增三個圓，圓出現之後，立即啟動過渡效果。
第一個圓，要求移動 x 座標。
var circle1 = svg.append("circle")
.attr("cx", 100)
.attr("cy", 100)
.attr("r", 45)
.style("fill","green");
//在1秒（1000毫秒）內將圓心座標由100變為300
circle1.transition()
.duration(1000)
.attr("cx", 300);第二個圓，要求既移動 x 座標，又改變顏色。
var circle2 = svg.append("circle")... //與第一個圓一樣，省略部分程式碼
//在1.5秒（1500毫秒）內將圓心座標由100變為300，
//將顏色從綠色變為紅色
circle2.transition()
.duration(1500)
.attr("cx", 300)
.style("fill","red");第三個圓，要求既移動 x 座標，又改變顏色，還改變半徑。
var circle3 = svg.append("circle")... //與第一個圓一樣，省略部分程式碼
//在2秒（2000毫秒）內將圓心座標由100變為300
//將顏色從綠色變為紅色
//將半徑從45變成25
//過渡方式採用bounce（在終點處彈跳幾次）
circle3.transition()
.duration(2000)
.ease("bounce")
.attr("cx", 300)
.style("fill","red")
.attr("r", 25);原始碼如下：
<html>
<head>
<meta charset="utf-8">
<title>讓圖表動起來</title>
</head>
<body>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
//畫布大小
var width = 400;
var height = 400;
//在 body 裡新增一個 SVG 畫布
var svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height);
var circle1 = svg.append("circle")
.attr("cx", 100)
.attr("cy", 100)
.attr("r", 45)
.style("fill","green");
//在1秒（1000毫秒）內將圓心座標由100變為300
circle1.transition()
.duration(1000)
.attr("cx", 300);
var circle2 = svg.append("circle")
.attr("cx", 100)
.attr("cy", 200)
.attr("r", 45)
.style("fill","green");
//在1.5秒（1500毫秒）內將圓心座標由100變為300，
//將顏色從綠色變為紅色
circle2.transition()
.duration(1500)
.attr("cx", 300)
.style("fill","red");
var circle3 = svg.append("circle")
.attr("cx", 100)
.attr("cy", 300)
.attr("r", 45)
.style("fill","green");
//在2秒（2000毫秒）內將圓心座標由100變為300
//將顏色從綠色變為紅色
//將半徑從45變成25
//過渡方式採用bounce（在終點處彈跳幾次）
circle3.transition()
.duration(2000)
.ease("bounce")
.attr("cx", 300)
.style("fill","red")
.attr("r", 25);
</script>
</body>
</html> 給柱形圖加上動態效果
在上一章完整柱形圖的基礎上稍作修改，做成一個帶動態效果的、有意思的柱形圖
在新增文字元素和矩形元素的時候，啟動過渡效果
讓各柱形和文字緩慢升至目標高度，並且在目標處跳動幾次。
對於文字元素，程式碼如下：
.attr("y",function(d){
var min = yScale.domain()[0];
return yScale(min);
})
.transition()
.delay(function(d,i){
return i * 200;
})
.duration(2000)
.ease("bounce")
.attr("y",function(d){
return yScale(d);
});文字元素的過渡前後，發生變化的是 y 座標
起始狀態:是在 y 軸等於 0 的位置（但要注意，不能在起始狀態直接返回 0，要應用比例尺計算畫布中的位置）
終止狀態:是目標值。
對於矩形元素，思想與文字元素一樣，只是在計算起始狀態時要稍微複雜一些.
原始碼如下：
<html>
<head>
<meta charset="utf-8">
<title>讓圖表動起來</title>
<style>
.axis path,
.axis line{
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
.axis text {
font-family: sans-serif;
font-size: 11px;
}
.MyRect {
fill: steelblue;
}
.MyText {
fill: white;
text-anchor: middle;
}
</style>
</head>
<body>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
//畫布大小
var width = 400;
var height = 400;
//在 body 裡新增一個 SVG 畫布
var svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height);
//畫布周邊的空白
var padding = {left:30, right:30, top:20, bottom:20};
//定義一個數組
var dataset = [10, 20, 30, 40, 33, 24, 12, 5];
//x軸的比例尺
var xScale = d3.scale.ordinal()
.domain(d3.range(dataset.length))
.rangeRoundBands([0, width - padding.left - padding.right]);
//y軸的比例尺
var yScale = d3.scale.linear()
.domain([0,d3.max(dataset)])
.range([height - padding.top - padding.bottom, 0]);
//定義x軸
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom");
//定義y軸
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left");
//矩形之間的空白
var rectPadding = 4;
//新增矩形元素
var rects = svg.selectAll(".MyRect")
.data(dataset)
.enter()
.append("rect")
.attr("class","MyRect")
.attr("transform","translate(" + padding.left + "," + padding.top + ")")
.attr("x", function(d,i){
return xScale(i) + rectPadding/2;
} )
.attr("width", xScale.rangeBand() - rectPadding )
.attr("y",function(d){
var min = yScale.domain()[0];
return yScale(min);
})
.attr("height", function(d){
return 0;
})
// =========================================
.transition()
.delay(function(d,i){
return i * 200;
})
.duration(2000)
.ease("bounce")
.attr("y",function(d){
return yScale(d);
})
.attr("height", function(d){
return height - padding.top - padding.bottom - yScale(d);
});
//新增文字元素
var texts = svg.selectAll(".MyText")
.data(dataset)
.enter()
.append("text")
.attr("class","MyText")
.attr("transform","translate(" + padding.left + "," + padding.top + ")")
.attr("x", function(d,i){
return xScale(i) + rectPadding/2;
} )
.attr("dx",function(){
return (xScale.rangeBand() - rectPadding)/2;
})
.attr("dy",function(d){
return 20;
})
.text(function(d){
return d;
})
.attr("y",function(d){
var min = yScale.domain()[0];
return yScale(min);
})
// =========================================
.transition()
.delay(function(d,i){
return i * 200;
})
.duration(2000)
.ease("bounce")
.attr("y",function(d){
return yScale(d);
});
//新增x軸
svg.append("g")
.attr("class","axis")
.attr("transform","translate(" + padding.left + "," + (height - padding.bottom) + ")")
.call(xAxis);
//新增y軸
svg.append("g")
.attr("class","axis")
.attr("transform","translate(" + padding.left + "," + padding.top + ")")
.call(yAxis);
</script>
</body>
</html> 相關推薦
D3.js 第九課 讓圖表動起來
D3 支援 “製作動態的圖表” 有時候，讓使用者看清楚圖表的 緩慢變化的過程，能給使用者不小的友好感。 什麼是動態效果 靜態的圖表：一蹴而就地出現，繪製完成後 不再發生變化 動態的圖表：是指圖表在某一時間段會發生某種變化，可能是形狀、顏色、位置等，而
D3.js的V5版本-Vue框架中使用(第五章) ---讓圖表動起來
一. api講解 * .attr(xxx) .transition() .attr(xxx)，transition()表示新增過渡，也就是從前一個屬性過渡到後一個屬性 * .duration(2000)，表示過渡時間持續2秒 * .delay(500)，表示延遲0.4秒後再進
【 D3.js 入門系列 — 6 】 讓圖表動起來
1. 什麼是動態效果 前面幾章製作的圖表是一蹴而就地出現，然後繪製完成後不再發生變化的，這是靜態的圖表。 動態的圖表，是指圖表在某一時間段會發生某種變化，可能是形狀、顏色、位置等，而且使用者是可以看到變化的過程的。 例如，有一個圓，圓心為 (100, 100)。現在我們希
Unity Shader入門精要學習筆記 - 第11章 讓畫面動起來
位置 視覺效果 想要 朝向 系列 圖像 顏色 offset star 轉自 馮樂樂的 《Unity Shader入門精要》 Unity Shader 中的內置變量 動畫效果往往都是把時間添加到一些變量的計算中，以便在時間變化時畫面也可以隨之變化。Unity Shader 提
第九課javascript語句運用實例
pan 個數 cas alt if...else 乘法 blog pre javascrip if...else語句 1 var a=12; 2 if(a>10){ 3 alert("a的值大於10"); 4 }else{ 5 alert("a的值不
快學Scala 第九課 （伴生對象和枚舉）
over objectc yellow str imp 擴展類 new 伴生對象 ray Scala沒有靜態方法和靜態字段， 你可以用object這個語法結構來達到同樣的目的。 對象的構造器只有在第一次被使用時才調用。 伴生對象apply方法： 類和它的伴生對象可以互相訪問
第九課：買賣點
get tin ref 1-1 html 買賣 es2017 targe 圖片 http://www.52investing.com/jpkecheng/payRoom_31_109.html 第九課：買賣點
電腦小白學習第九課---看圖軟件之美圖看看
鼠標 選擇 彈出 water 彈出窗口 打開方式 com jpg ces windows下看圖軟件有很多，windows系統自帶的也有看圖軟件，不過很難用。今天推薦大家使用美圖看看軟件，查看電腦圖片。我們先下載這個軟件，在百度搜索"美圖看看",如下圖所示
第九課 特殊權限set_uid、stick_bit，軟鏈接，硬鏈接
20180329一、特殊權限set_uid 1、 ls -l /usr/bin/passwd 看見這個文件有一個s（s=set_uid)權限。它可以讓普通用戶臨時擁有該命令所有者的身份。前提文件是可執行的二進制文件。 2、如何設置chmod u+s /usr/bin/ls 可以讓普通用戶臨時可以用ls查看/r
Linux運維第九課----目錄結構之etc目錄內容
屬性 inux運維 tab 自動掛載 network 永久 scrip 一個 local 一、proc目錄遺留 proc/loadavg第一個0表示1分鐘的平均負載第二個0表示5分鐘的平均負載第三個0表示15分鐘的平均負載 w3.uptime4.負載與核心總數當數字越來
第九課--09_01_磁盤及文件系統管理詳解之三
lock 多系統 otl rtx 塊大小 ble 當前 part 文件 一、VFS (Virtual File System)1: 用戶模式--用戶空間--用戶進程進程以模式的形式運行在的空間--用戶空間2：內核模式--內核空間3:block size : 1024-1k,
第九課-09_02_磁盤及文件系統管理詳解之五
大小 卷標 設備 空間 part 系統管 支持 -m nod 一。創建文件系統---格式化分區就是創建文件系統 mkfs make file system---創建文件系統的命令mkfs -t FSTYPE PARTmkfs -t ext2 /dev/sda4---
第九課--09_03_磁盤及文件系統管理詳解之六.avi
window over 管理 cache 重復 允許 虛擬內存 空間 -- 一。swap分區--交換分區--高性能磁盤，機械磁盤就放在靠外的磁道page outpage infree--查看物理內存和交換空間的情況-m 按 M 查看buffer 緩沖---緩沖區，速度慢的
第九課--09_04_Linux壓縮及歸檔
linux壓縮 壓縮文件 後綴 源文件 gunzip bzip zip 指定 相同 一。壓縮，解壓縮liunx壓縮格式：gz,bz2,xz,zip,Z壓縮算法，算法不同壓縮比不同 compress:壓縮後文件名和原文件名相同，後綴為Z--FILENAME.Zuncompre
斯坦福大學-自然語言處理入門 筆記 第九課 資訊抽取（information extraction）
一、介紹 1、資訊抽取（information extraction） 資訊抽取（IE）系統 找到並理解文字中的有限的相關性 從很多的文件之中收集資訊 產生一個相關資訊的結構化的表徵 目的： 進行資
C++筆記 第九課 函式過載分析（下）---狄泰學院
如果在閱讀過程中發現有錯誤，望評論指正，希望大家一起學習，一起進步。 學習C++編譯環境：Linux 第九課 函式過載分析（下） 1.過載與指標 下面的函式指標將儲存哪個函式的地址?第一個 函式過載遇上函式指標 將過載函式名賦值給函式指標時 1.根據過載規則挑選與函式指標引
d3.js水平橫向柱狀圖表
index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <li
第二本書第九課
ava form wid 默認值 nbsp 大於 縮放 css3 關鍵幀 一.CSS3變形transform 1.平移：translate(x,y) translateX(x) translateY(y) 註意：如果想只向X軸平移那麽可以translateX，如
潭州課堂25班：Ph201805201 django框架 第九課 GET，POST 請求 檔案上傳，HttpResponse，cookie (課堂筆記)
在專案中新建個APP， 在主目錄中的配置檔案中進行 APP 註冊 在主目錄中的 urls 檔案中進行路徑分配 新建 urrls 檔案 進行分路由配置 建立模板檔案 html 檔案 寫個 form 表單 HttpRequest物件 form 表單的 get 請求， re
Es學習第九課， 聚合查詢和複合查詢
ES除了實現前幾課的基本查詢，也可以實現類似關係型資料庫的聚合查詢，如平均值sum、最小值min、最大值max等等 我們就用上一課的資料作為參考來舉例 聚合查詢 sum聚合 sum是一個求累加值的聚合，其作用與關係型資料庫中相同。 GET /lib4/items/_search { "si