D3.js sample 01

タグ:

D3.js の覚え書きとして  jsdo.it 上にコードを配置してみました。

以下の様なコードです。

var nChartW = 320;
var nChartH = 320;
var nPadding = 32;
var listData = [];

//	SVG 領域の設定
var svg = d3.select("body").append("svg");

svg.attr("width", nChartW);
svg.attr("height", nChartH);

//	スケーリング設定
var xScale = d3.scale.linear()
    .domain([0, 100])
    .range([nPadding, nChartW - nPadding])
    .nice();

var yScale = d3.scale.linear()
    .domain([0, 100])
    .range([nChartH - nPadding, nPadding])
    .nice();

var xAxis = d3.svg.axis()
	.scale(xScale)
	.orient("bottom")
	.ticks(10);

var yAxis = d3.svg.axis()
	.scale(yScale)
	.orient("left")
	.ticks(10);

svg.append("g")
	.attr("class", "axis")
	.attr("transform", "translate(0, " + (nChartH - nPadding) + ")")
	.call(xAxis);

svg.append("g")
	.attr("class", "axis")
	.attr("transform", "translate(" + (nPadding) + ", 0)")
	.call(yAxis);

//	クリッピング設定

svg.append("clipPath")
	.attr("id", "chart-area")
	.append("rect")
	.attr("x", nPadding)
	.attr("y", nPadding)
	.attr("width", nChartW - nPadding * 2)
	.attr("height", nChartH - nPadding * 2);

var oCCircle = svg.append("g")
	.attr("id", "circles")
	.attr("clip-path", "url(#chart-area)");

setInterval(
	function(){

		var nCount = Math.floor(Math.random() * 100);

		listData = [];

		for(var n = 0; n < nCount; n ++)
		{
			var nX = Math.floor(Math.random() * 100);
			var nY = Math.floor(Math.random() * 100);
			var nV = Math.floor(Math.random() * 20);
			listData.push({k:n, x:nX, y:nY, value:nV});
		}

		//	チャート描画

		var o = oCCircle.selectAll("circle")
			.data(listData, function(d){return(d.k);});

		o
			.transition()
			.duration(1000)
			.attr("fill-opacity", 0.5)
			.attr("fill", "black")
			.attr("cx", function(d){return(xScale(d.x));})
			.attr("cy", function(d){return(yScale(d.y));})
			.attr("r",
				function(d)
				{
					return(d.value);
				}
			);

		o.enter()
			.append("circle")
			.transition()
			.duration(1000)
			.each(
				"start",
				function()
				{
					d3.select(this)
						.attr("fill-opacity", 0.0)
						.attr("r", 320);
				}
			)
			.attr("fill-opacity", 0.5)
			.attr("fill", "red")
			.attr("cx", function(d){return(xScale(d.x));})
			.attr("cy", function(d){return(yScale(d.y));})
			.attr("r",
				function(d)
				{
					return(d.value);
				}
			);

		o.exit()
			.transition()
			.duration(1000)
			.attr("fill-opacity", 0.0)
			.attr("r",
				function(d)
				{
					return(0);
				}
			)
			.remove();
	},
	2000
);

実際の動作は jsdo.it 上で確認する事も出来ます。