d3 散布圖 (3)

d3 散布圖 (3)

by Shang-De You

HTML

<button type="button" onclick="getData()">
  繪製圖表
</button>

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)

// -- 資料點 --

function getData(){
	dataSet = []  
  var rand = d3.random.normal(50,15)    
  for(var i = 0; i<10; i++){
    var valueX = (rand()/100).toFixed(1)
    var valueY = (rand()/100).toFixed(1)
    dataSet.push([valueX, valueY])
  }

  drawAction()
}

/* function draw(){
  var update = svg.selectAll("circle")
    .data(dataSet)
  var enter = update.enter()
  var exit = update.exit()
  
  update.call(fillCircle)
  enter.append("circle").call(fillCircle)
  exit.remove()
} */

function drawAction(){
	var update = svg.selectAll("circle")
    .data(dataSet)
  var enter = update.enter()
  var exit =...