説明
D3.jsで散布図を描くにはデータの値をX,Y座標にマッピングします。散布図はappend("circle")を使って円を生成します。生成した円のX座標を指定するにはcx属性、Y座標を指定するにはcy属性に指定します。属性を指定するattr()メソッドの2番目のパラメーターに関数を指定することで、データから描画するX,Y座標を求めることができます。
HTMLソース
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>D3.js サンプル</title>
<link rel="stylesheet" href="css/main.css">
<style>
svg { border: 1px solid black; }
</style>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</head>
<body>
<h1>D3.jsサンプル</h1>
<div id="myGraph"></div>
<script src="js/sample.js"></script>
</body>
</html>
JavaScriptコード
var list = [[120,210], [230, 40], [200, 130], [15, 225], [182, 75], [50, 20], [160, 140], [160, 90], [310, 10]];
var svgWidth = 320; // SVG領域の横幅
var svgHeight = 240; // SVG領域の縦幅
// SVGの表示領域を生成
var svg = d3.select("#myGraph").append("svg")
.attr("width", svgWidth).attr("height", svgHeight)
// 散布図を描画
svg.selectAll("path")
.data(list)
.enter()
.append("circle") // 円を生成する
.attr("cx", function(d,i){
return d[0]; // 描画するX座標を計算
})
.attr("cy", function(d){
return svgHeight-d[1]; // 描画するX座標を計算
})
.attr("r", 2)
.attr("stroke", "black") // 円の区切り線を黒色にする
.attr("stroke-width", "1px") // 円の線幅を指定する
.attr("fill", "red"); // 円の塗りつぶしを黄色にする