d3繪製折線圖，及自適應問題
阿新 • • 發佈：2019-02-14
-
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>