最近學d3，對着書中的例子敲了一遍
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>散點圖</title>
<script src="d3/d3.js"></script>
<script src="jquery-2.2.4.js"></script>
<style>
.axis path,
.axis line{
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
</style>
</head>
<body>
<script type="application/javascript">
//定義圖像大小、座標軸大小
var svgWidth = 600;
var svgHeight = 600;
var xAxisWidth = 500;
var yAxisWidth = 500;
var padding = {top:30,bottom:30,left:50,right:30};
//圓心數據
var center = [[0.5,0.5],[0.7,0.8],[0.4,0.9],[0.11,0.32],[0.88,0.25],
[0.75,0.12],[0.5,0.1],[0.2,0.3],[0.4,0.1],[0.6,0.7]];
//定義比例尺
var xScale = d3.scale.linear()
.domain([0,1.2*d3.max(center,function(d){
return d[0];
})])
.range([0,xAxisWidth]);
var yScale = d3.scale.linear()
.domain([0,1.2*d3.max(center, function (d) {
return d[1];
})])
.range([0,yAxisWidth]);
//數據寫入選擇集：創建svg，創建圖像（update、enter、exit），確定座標、響應與其他屬性
var svg = d3.select("body").append("svg")
.attr("width",svgWidth)
.attr("height",svgHeight);
var circles = svg.selectAll("circle")
.data(center)
.enter()
.append("circle")
.attr("fill","black")
.attr("cx",function(d){
return padding.left+xScale(d[0]);
})
.attr("cy",function(d){
return svgHeight-padding.bottom-yScale(d[1]);
})
.attr("r",8);
circles.on("click",function(d,i){
alert(d+" "+i);
});
//顯示座標軸
var xSvgAxis = svg.append("g")
.attr("class","axis")
.attr("transform","translate("+padding.left+","+(svgHeight-padding.bottom)+")");
var ySvgAxis = svg.append("g")
.attr("class","axis")
.attr("transform","translate("+padding.left+","+(svgHeight-padding.bottom-yAxisWidth)+")");
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom");
yScale.range([yAxisWidth,0]);
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left");
xSvgAxis.call(xAxis);
ySvgAxis.call(yAxis);
</script>
</body>
</html>效果圖：
