d3 線圖

d3 線圖

by Shang-De You

HTML

<!-- <svg width="400" height="400">

</svg> -->

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 width = 400
var height = 400
var padding = { top: 50, right: 50, bottom: 50, left: 50}

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

var colors = [d3.rgb(0,0,255), d3.rgb(0,255,0)]

var dataSet = [
	{
		country: "china",
    gdp: [[2000,11920],[2001,13170],[2002,14550],[2003,16500],[2004,19440],[2005,22870],[2006,27930],[2007,35040],[2008,45470],[2009,51050],[2010,59490],[2011,73140],[2012,83860],[2013,103550]]
  },
  {
  	country: "japan",
    gdp: [[2000,47310],[2001,41590],[2002,39800],[2003,43020],[2004,46550],[2005,45710],[2006,43560],[2007,43560],[2008,48490],[2009,50350],[2010,54950],[2011,59050],[2012,59370],[2013,48980]]
  }
]


var gdpMax = 0
for(var i = 0; i < dataSet.length; i++){
	var currentGdp = d3.max(dataSet[i].gdp, function(d){
  	return d[1]
  })
  if(currentGdp > gdpMax){
  	gdpMax = currentGdp
  }
}

var xScale = d3.scale.linear()
	.domain([2000,2013])
  .range([0, width - padding.left - padding.right])
  
var yScale = d3.scale.linear()
	.domain([0,gdpMax])
  .range([height - padding.top - padding.bottom, 0])


var linePath = d3.svg.line()
	.x(function(d){ return xScale(d[0])})
  .y(function(d){ return yScale(d[1])})
  .interpolate("cardinal")


// -- 線 --
svg.selectAll("path")
	.data(dataSet)
  .enter()
  .append("path")
  .attr("transform", "translate(" + padding.left + "," + padding.top + ")")
  .attr("d", function(d){
  	return linePath(d.gdp)
  })
  .attr("fill","none")
  .attr("stroke-width", 3)
  .attr("stroke", function(d,i){
  	return colors[i]
  })
  
  
// -- 座標軸 --
var xAxis = d3.svg.axis()
	.scale(xScale)
  .ticks(5)
  .tickFormat(d3.format("d"))
  .orient("bottom")
  
var yAxis = d3.svg.axis()
	.scale(yScale)
  .orient("left")
  
svg.append("g")
	.attr("class","xAxis")
  .attr("transform", "translate(" + padding.left + "," + (height - padding.bottom) + ")")
	.call(xAxis)
  
svg.append("g")
	.attr("class", "yAxis")
  .attr("transform", "translate(" + padding.left + "," +...