D3 的漸變動畫效果

D3 加入漸變動畫效果的方法:

svg.append("rect")
	.attr("fill", "blue")
	.attr("x", 20)
	.attr("y", 20)
	.attr("width", 50)
	.attr("height", 40)
	.transition()			// 加入漸變效果
	.delay(200)				// 延後漸變動畫的開始時間
	.duration(1000)			// 漸變動畫持續時間
	.ease("bounce")			// 漸變動化效果
	.attr("width", 350);

以上程式,可以看到一個方形長條圖寬度變寬的效果。

但如果是在 D3 v4.x / v5.x 版本執行,可能會出現以下錯誤訊息:

Uncaught Error
    at d3.v5.min.js:2
    at Pr.ease (d3.v5.min.js:2)
    at test-transition.html:35

如果是使用 D3 v4.x / v5.x 以後版本,請改用:

svg.append("rect")
	.attr("fill", "blue")
	.attr("x", 20)
	.attr("y", 20)
	.attr("width", 50)
	.attr("height", 40)
	.transition()			// 加入漸變效果
	.delay(200)				// 延後漸變動畫的開始時間
	.duration(1000)			// 漸變動畫持續時間
	.ease(d3.easeBounce)	// 漸變動化效果
	.attr("width", 350);

D3 v3.x 與 v4.x 的漸變效果 (ease) 對應:

  • linear → d3.easeLinear
  • linear-in → d3.easeLinear
  • linear-out → d3.easeLinear
  • linear-in-out → d3.easeLinear
  • linear-out-in → d3.easeLinear
  • poly-in → d3.easePolyIn
  • poly-out → d3.easePolyOut
  • poly-in-out → d3.easePolyInOut (d3.easePoly 等效)
  • poly-out-in → 移除了
  • quad-in → d3.easeQuadIn
  • quad-out → d3.easeQuadOut
  • quad-in-out → d3.easeQuadInOut (d3.easeQuad 等效)
  • quad-out-in → 移除了
  • cubic-in → d3.easeCubicIn
  • cubic-out → d3.easeCubicOut
  • cubic-in-out → d3.easeCubicInOut (d3.easeCubic 等效)
  • cubic-out-in → 移除了
  • sin-in → d3.easeSinIn
  • sin-out → d3.easeSinOut
  • sin-in-out → d3.easeSinInOut (d3.easeSin 等效)
  • sin-out-in → 移除了
  • exp-in → d3.easeExpIn
  • exp-out → d3.easeExpOut
  • exp-in-out → d3.easeExpInOut (d3.easeExp 等效)
  • exp-out-in → 移除了
  • circle-in → d3.easeCircleIn
  • circle-out → d3.easeCircleOut
  • circle-in-out → d3.easeCircleInOut (d3.easeCircle 等效)
  • circle-out-in → 移除了
  • elastic-in → d3.easeElasticOut (d3.easeElastic 等效)
  • elastic-out → d3.easeElasticIn
  • elastic-in-out → 移除了
  • elastic-out-in → d3.easeElasticInOut
  • back-in → d3.easeBackIn
  • back-out → d3.easeBackOut
  • back-in-out → d3.easeBackInOut (d3.easeBack 等效)
  • back-out-in → 移除了
  • bounce-in → d3.easeBounceOut (d3.easeBounce 等效)
  • bounce-out → d3.easeBounceIn
  • bounce-in-out → 移除了
  • bounce-out-in → d3.easeBounceInOut
  • 發表迴響

    你的電子郵件位址並不會被公開。 必要欄位標記為 *