iT邦幫忙

DAY 20
1

SVG 與 D3.js系列 第 20

D3.js 超粘的Voronoi Diagram繪圖

完整範例:http://wcc723.github.io/d3js/2014/10/19/Ironman-30-days-20/

Voronoi Diagram這個繪圖我在Blog的Banner上,主要原因也是因為他很有趣,除了視覺感外,它還包含了簡單的互動。

來源:http://bl.ocks.org/mbostock/4060366

這個繪圖的方式,經過我同事的指點,我才發現他是有理論基礎的(可參考:http://www.csie.ntnu.edu.tw/~u91029/VoronoiDiagram.html),然而D3.js內建這樣的Layout不經讓我覺得對D3.js的誤會很大,原本認為D3.js是繪製資料圖表而已,但在透過上面那個理論的網站,會發現很多很多的數學原理,都和D3.js有些關聯。

Voronoi Diagram 是大自然的圖案,諸如長頸鹿的斑紋、蜻蜓的翅膀、葉片的細胞壁。應用相當廣泛。

互動

在這一個範例中,一開始會先繪製一個Voronoi Diagram圖案,接下來滑鼠滑過之後,會替換掉其中一個,並且會隨著滑鼠的移動不斷的改變其週邊的外形。

var svgSize = {
		w : 960,
		h : 500
	}

	var hslValue = 3;

	var vertices = d3.range(100).map(function(d) {
		return [Math.random() * svgSize.w, Math.random() * svgSize.h];
		//產生100個坐標,位置是隨機的
	});

	console.log(vertices)

	var voronoi = d3.geom.voronoi() //套用voronoi,這段只有裁切區域
		.clipExtent([[0,0], [svgSize.w , svgSize.h]])	
		//裁切voronoi區域

	var svg = d3.select('.chart').append('svg')
		.attr('width', svgSize.w)
		.attr('height', svgSize.h)
		.on('mousemove', function() {
			vertices[0] = d3.mouse(this);//殘忍地將第一個替換掉
			redraw();
			//將滑鼠的坐標帶入redraw
		})

	var path = svg.append('g').selectAll('path'); //等等要用path來畫間隔線

	svg.selectAll('circle')
		.data(vertices) //將剛剛產生的x,y插入
		.enter().append('circle') //補上原點的位置
		.attr('transform', function(d){ return 'translate(' + d + ')'; }) //位置坐標如資料
		.attr('r', 1.5) //大小是1.5px

	redraw()

	function redraw(){
		path = path.data(voronoi(vertices) , polygon)
		// voronoi(vertices) 會傳回path 所需要的路徑坐標
		// 然後用polygon function執行

		path.exit().remove();
		//如果多餘就移除

		path.enter().append('path')
			.attr('d', polygon) //調用下方的polygon函示
			.style('fill', function(d, i){ return d3.hsl((120 + i * hslValue % 360),.6,.6)})

		path.order(); //這段似乎有沒有都沒差...
	}

	function polygon(d) {
		console.log(d)
		return "M" + d.join("L") + "Z";
	}

另外我的Blog上的Banner,也是這個方式去做出來的,只是改變了兩個效果:

  1. RWD(自適應)
  2. 色彩

原始碼在https://github.com/Wcc723/wcc723.github.io/blob/master/assets/themes/casper2013/js/d3_banner.js,有興趣的可以參考看看~(無註解)


上一篇
D3.js 圈圈小效果
下一篇
D3.js Transition動態效果
系列文
SVG 與 D3.js30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言