1. 程式人生 > >d3繪製折線圖,及自適應問題

d3繪製折線圖,及自適應問題

  • 1、demo

<!DOCTYPE html>
<meta charset="utf-8">

<style type="text/css">
/* 13. Basic Styling with CSS */

/* Style the lines by removing the fill and applying a stroke */
.line {
    fill: none;
    stroke: #ffab00;
    stroke-width: 3;
}

/* Style the dots by assigning a fill and stroke */
.dot {
    fill: #ffab00;
    stroke: #fff;
}
.d3-line-axis path, .d3-line-axis line{
  stroke: blue;
}
.d3-line-axis text{
  font-family: sans-serif;
  font-size: 12px;
  fill: blue;
}

</style>
<!-- Body tag is where we will append our SVG and SVG objects-->
<body>
	<div style="width:100%;">
		<svg></svg>
	</div>
</body>

<!-- Load in the d3 library -->
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>

window.onload = function() {
	initDom();
}
window.onresize = function(){
	initDom();
	drawLine();
}
function initDom() {
	
	d3.select("div").style('height', window.innerHeight - 20 + 'px');
}
function drawLine() {
	var svg1 = d3.select('svg');
	if(svg1) {
		svg1.remove()
	}
	
	// 2. Use the margin convention practice 
	var margin = {top: 50, right: 50, bottom: 50, left: 50}
	  , width = window.innerWidth - margin.left - margin.right // Use the window's width 
	  , height = window.innerHeight - margin.top - margin.bottom; // Use the window's height
	console.log(width, height);
	// The number of datapoints
	var n = 25;
	var curDate = new Date();
	var preDate = new Date(curDate.getTime() - 24*60*60*1000); //前一天
	var nextDate = new Date(curDate.getTime() + 24*60*60*1000); //後一天
	// 5. X scale will use the index of our data
	var xScale = d3.scaleTime()
		.domain([preDate, curDate]) // input
		.range([0, width])
		.nice(); // output

	// 6. Y scale will use the randomly generate number 
	var yScale = d3.scaleLinear()
		.domain([0, 1]) // input 
		.range([height, 0]); // output 

	// 7. d3's line generator
	var line = d3.line()
		.x(function(d, i) { 
			return xScale(new Date(d.x)); 
		}) // set the x values for the line generator
		.y(function(d) { return yScale(d.y); }) // set the y values for the line generator 
		.curve(d3.curveMonotoneX) // apply smoothing to the line

	// 8. An array of objects of length N. Each object has key -> value pair, the key being "y" and the value is a random number
	var dataset = d3.range(n).map(function(d, i) { 
		return {
			"x": new Date(curDate.getTime() - i*60*60*1000),
			"y": d3.randomUniform(1)() 
		} 
	})

	// 1. Add the SVG to the page and employ #2
	var svg = d3.select("div").append("svg")
		.attr("width", '100%')
		.attr("height",'100%')
		.append("g")
		.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

	// 3. Call the x axis in a group tag
	svg.append("g")
		.attr("class", "x axis")
		.attr("transform", "translate(0," + height + ")")
		.call(d3.axisBottom(xScale).ticks(24).tickFormat(d3.timeFormat("%I %p")))
		.attr('class', 'd3-line-axis'); // Create an axis component with d3.axisBottom

	// 4. Call the y axis in a group tag
	svg.append("g")
		.attr("class", "y axis")
		.call(d3.axisLeft(yScale).ticks(4))
		.attr('class', 'd3-line-axis'); // Create an axis component with d3.axisLeft

	// 9. Append the path, bind the data, and call the line generator 
	svg.append("path")
		.datum(dataset) // 10. Binds data to the line 
		.attr("class", "line") // Assign a class for styling 
		.attr("d", line); // 11. Calls the line generator 

	// 12. Appends a circle for each datapoint 
	svg.selectAll(".dot")
		.data(dataset)
		.enter().append("circle") // Uses the enter().append() method
		.attr("class", "dot") // Assign a class for styling
		.attr("cx", function(d, i) { return xScale(i) })
		.attr("cy", function(d) { return yScale(d.y) })
		.attr("r", 5);
}
drawLine();
</script>