d3 散布圖 (2)

d3 散布圖 (2)

by Shang-De You

CSS

.xAxis line, .yAxis line {
  fill:none;
  stroke:rgba(0,0,0,.1);
}

.xAxis path, .yAxis path{
  fill: none;
  stroke: black;
  shape-rendering: crispEdges;
}

.xAxis text, .yAxis text {
  font-family: sans-serif;
  font-size: 11px;
}

JavaScript

var dataSet = [[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 dataSet = [[0.3, 0.2],[0.5,0.1]]

var width = 400
var height = 300
var padding = {top:50, right:50, bottom:50, left:50}
var xAxisWidth = width - padding.left - padding.right
var yAxisWidth = height - padding.top - padding.bottom

var svg = d3.select("body").append("svg")
	.attr("width",width)
  .attr("height",height)

var xScale = d3.scale.linear()
	//.domain([0, d3.max(dataSet,function(d){ return d[0] })])
  .domain([0,1])
  .range([0,xAxisWidth])
  
var yScale = d3.scale.linear()
	//.domain([d3.max(dataSet,function(d){ return d[1] }),0])
  .domain([1,0])
  .range([0,yAxisWidth])

  
// -- 具分隔線的刻度 --
var xAxis = d3.svg.axis()
	.scale(xScale)
  .orient("bottom")
  .ticks(5)
  .tickFormat(function(d){
  	return d * 100 + '%'
  })
  .tickSize(-yAxisWidth,-yAxisWidth)
  
var yAxis = d3.svg.axis()
	.scale(yScale)
  .orient("left")
  .ticks(5)
  .tickFormat(function(d){
  	return d * 100 + '%'
  })
  .tickSize(-xAxisWidth,-xAxisWidth)  
  
var xAxisG = svg.append('g')
  .attr("transform","translate("+padding.left+","+(padding.top + yAxisWidth)+")")
  .classed("xAxis",true)
  .call(xAxis)

var yAxisG = svg.append('g')
  .attr("transform","translate("+padding.left+","+padding.top+")")
  .classed("yAxis",true)
  .call(yAxis)

// -- 資料點 --
var circle = svg.selectAll("circle")
  .data(dataSet)
  .enter()
  .append("circle")
  .attr("fill","black")
  .attr("cx",function(d){
    return padding.left + xScale(d[0])
  })
  .attr("cy",function(d){
    return padding.top + yScale(d[1])
  })
  .attr("r",5)