d3 散布圖

d3 散布圖

by Shang-De You

CSS

.xAxis path, .xAxis line, .yAxis path, .yAxis line{
  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:30, right:30, bottom:30, left:30}
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] })])
  .range([0,xAxisWidth])
  
var yScale = d3.scale.linear()
	.domain([0, d3.max(dataSet,function(d){ return d[1] })])
  .range([0,yAxisWidth])

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

//axis
var xAxis = d3.svg.axis()
	.scale(xScale)
  .orient("bottom")
  
var yAxis = d3.svg.axis()
	.scale(yScaleReverse)
  .orient("left")
  
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 + yScaleReverse(d[1])
  })
  .attr("r",5)