eightHundreds/index.html Secret

## index.html
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	<link rel="stylesheet" type="text/css" href="style.css"/>
	</head>
	<body>
		<div id="container">

		</div>
	</body>
	<script src="https://cdn.bootcss.com/d3/4.4.3/d3.min.js"></script>
	<script src="index.js" type="text/javascript" charset="utf-8"></script>
</html>

## index.js
window.onload=function(){
	var svgArea={width:500,height:250};
	var margin={left:50,top:30,right:20,bottom:20}
	,gArea={width:svgArea.width-margin.left-margin.right,height:svgArea.height-margin.top-margin.bottom};

	var data=[1,3,5,7,8,4,3,7];

	var svg=d3.select('#container')
	.append('svg')
	.attr('width',svgArea.width)
	.attr('height',svgArea.height)


	var g_line=svg.append('g')
	.attr('transform',"translate("+margin.left+","+margin.top+")");

	//数据映射器
	var scale_x=d3.scaleLinear().domain([0,data.length-1]).range([0,gArea.width])//x(function(d,i){return i})
	var scale_y=d3.scaleLinear().domain([0,d3.max(data)]).range([gArea.height,0])

	//直线数据生成器
	var line_generate=d3.line()
	.x(function(d,i){return scale_x(i);})
	.y(function(d,i){return scale_y(d);})
	.curve(d3.curveCardinal)


	g_line.append('path').attr('d',line_generate(data))

	//坐标轴描述
	var axis_x=d3.axisBottom(scale_x)
	var axis_y=d3.axisLeft(scale_y)

	//坐标轴插入
	var g_axis_x=g_line.append('g').call(axis_x)
	.attr('transform',"translate(0,"+gArea.height+")")
	var g_axis_y=g_line.append('g').call(axis_y)
	g_axis_y.append('text').text('y轴')
	.attr('class','axislabel')
	.attr('transform',"rotate(-90)")
	.attr('dy','1em')
}

## style.css
#container{
	background:#ddd;
	width: 500px;
	height: 250px;
	font-family: arial;
}
#container path{
	stroke: #111;
	fill: none;
}
#container g .axislabel{
	fill: black;
	font-size: 1.5em;
	text-anchor: end;
}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<title></title>
	<link rel="stylesheet" type="text/css" href="style.css"/>
	</head>
	<body>
	<div id="container">

	</div>
	</body>
	<script src="https://cdn.bootcss.com/d3/4.4.3/d3.min.js"></script>
	<script src="index.js" type="text/javascript" charset="utf-8"></script>
	</html>
	window.onload=function(){
	var svgArea={width:500,height:250};
	var margin={left:50,top:30,right:20,bottom:20}
	,gArea={width:svgArea.width-margin.left-margin.right,height:svgArea.height-margin.top-margin.bottom};

	var data=[1,3,5,7,8,4,3,7];

	var svg=d3.select('#container')
	.append('svg')
	.attr('width',svgArea.width)
	.attr('height',svgArea.height)


	var g_line=svg.append('g')
	.attr('transform',"translate("+margin.left+","+margin.top+")");

	//数据映射器
	var scale_x=d3.scaleLinear().domain([0,data.length-1]).range([0,gArea.width])//x(function(d,i){return i})
	var scale_y=d3.scaleLinear().domain([0,d3.max(data)]).range([gArea.height,0])

	//直线数据生成器
	var line_generate=d3.line()
	.x(function(d,i){return scale_x(i);})
	.y(function(d,i){return scale_y(d);})
	.curve(d3.curveCardinal)



	g_line.append('path').attr('d',line_generate(data))

	//坐标轴描述
	var axis_x=d3.axisBottom(scale_x)
	var axis_y=d3.axisLeft(scale_y)

	//坐标轴插入
	var g_axis_x=g_line.append('g').call(axis_x)
	.attr('transform',"translate(0,"+gArea.height+")")
	var g_axis_y=g_line.append('g').call(axis_y)
	g_axis_y.append('text').text('y轴')
	.attr('class','axislabel')
	.attr('transform',"rotate(-90)")
	.attr('dy','1em')
	}
	#container{
	background:#ddd;
	width: 500px;
	height: 250px;
	font-family: arial;
	}
	#container path{
	stroke: #111;
	fill: none;
	}
	#container g .axislabel{
	fill: black;
	font-size: 1.5em;
	text-anchor: end;
	}