D3简单折线图绘制

通过简单折线图实例，了解D3图表绘制流程

by miSunLaughing

CSS

.axis path,
.axis line{
    fill: none;
    stroke: black;
    shape-rendering: crispEdges;
}

.axis text {
    font-family: sans-serif;
    font-size: 11px;
}

.line {
   fill: none;
   stroke: black;
   stroke-width: 1.5px;
}

JavaScript

// 简单的折线图实例


// 添加画布
		//画布大小
var width = 400;
var height = 400;

		//在 body 里添加一个 SVG 画布   
var svg = d3.select("body")
    .append("svg")
    .attr("width", width)
    .attr("height", height);

		//画布周边的空白
 var padding = {left:30, right:30, top:20, bottom:20};
 
 
 
// 设置数据和比例尺
		//定义一个数组 为了简便，这里直接规定 输入域范围为[0, 50]，值域范围为[0, 100]
var dataset = [
	{x: 10, y: 34},
  {x: 20, y: 40},
  {x: 25, y: 24}, 
  {x: 30, y: 57},
  {x: 45, y: 75}];

		//x轴的比例尺
var xScale = d3.scaleLinear()
    .domain([0, 50]) // 数据的输入范围
    .range([0, width - padding.left - padding.right]);

		//y轴的比例尺
var yScale = d3.scaleLinear()
    .domain([0, 100]) // 数据的值域范围
    .range([height - padding.top - padding.bottom, 0]);
    
    
// 设置坐标轴
	//定义x轴
var xAxis = d3.axisBottom()
    .scale(xScale)

	//定义y轴
var yAxis = d3.axisLeft()
		.scale(yScale)
    
    
// 添加坐标轴
		//添加x轴
svg.append("g")
  .attr("class","axis")
  .attr("transform","translate(" + padding.left + "," + (height - padding.bottom) + ")")
  .call(xAxis); 

		//添加y轴
svg.append("g")
  .attr("class","axis")
  .attr("transform","translate(" + padding.left + "," + padding.top + ")")
  .call(yAxis);

// 绘制折线图
	// 直线生成器
  var linePath = d3.line()
  	.curve(d3.curveLinear)
    .x(function (d) { return xScale(d.x); })
    .y(function (d) { return yScale(d.y); });
  // 绘制折线图
  svg.append('g')
  	.attr("transform","translate(" + padding.left + "," + padding.top + ")")
  	.append("path")
    .attr("class", "line")
    .datum(dataset)
    .attr("d", function(d) {return linePath(d)}); // 调用生成器