切换布局
显示结果
<!DOCTYPE html> <html> <head> <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script> <style> .line { fill: none; stroke: green; stroke-width: 5px; } </style> </head> <body> <script> var margin = {top: 20, right: 20, bottom: 30, left: 50}, width = 960 - margin.left - margin.right, height = 500 - margin.top - margin.bottom; var x = d3.scaleTime().range([0, width]); var y = d3.scaleLinear().range([height, 0]); var valueline = d3.line() .x(function(d) { return x(d.year); }) .y(function(d) { return y(d.population); }); var svg = d3.select("body").append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")"); d3.csv("/demo_source/data.csv", function(error, data) { if (error) throw error; // format the data data.forEach(function(d) { d.year = d.year; d.population = +d.population; }); x.domain(d3.extent(data, function(d) { return d.year; })); y.domain([0, d3.max(data, function(d) { return d.population; })]); svg.append("path") .data([data]) .attr("class", "line") .attr("d", valueline); svg.append("g") .attr("transform", "translate(0," + height + ")") .call(d3.axisBottom(x)); svg.append("g") .call(d3.axisLeft(y)); }); </script> </body> </html>