标签：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> body { padding-top: 50px; padding-left: 100px; } #chart { width: 300px; height: 200px; border: 1px solid black; margin-top: 10px; } path { /*fill: purple; fill-opacity: 0.7;*/ fill: none; stroke: blue; stroke-width: 3px; } </style> </head> <body> <button onclick="updateChart(‘math‘)">Math</button> <button onclick="updateChart(‘science‘)">Science</button> <button onclick="updateChart(‘reading‘)">Reading</button> <div id="chart"></div> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script> <script> var w = 300; var h = 200; var path; var subjects; $.getJSON(‘//jsbin.com/vegaqi/1.js‘, function(json) { subjects = json; _.keys(subjects).forEach(function(subject) { subjects[subject].forEach(function(d) { d.date = d3.time.format("%Y%m%d").parse(d.date); console.log(d.date); }) }); path = d3.select(‘#chart‘) .append(‘svg‘) .attr(‘width‘, w) .attr(‘height‘, h) .append(‘g‘) .append(‘path‘); updateChart(‘math‘); }); function updateChart(subject) { var data = subjects[subject]; var dates = _.pluck(data, ‘date‘); var counts = _.pluck(data, ‘count‘); var x = d3.time.scale() .domain(d3.extent(dates))//d3.extent(), return [min, max] .range([0, w]); var y = d3.scale.linear() .domain(d3.extent(counts)) .range([h, 0]); var area = d3.svg.area() .interpolate(‘bundle‘) //This interpolate bundle is just going to give us nice, smooth curves when it interpolates the different points .x(function(d) { return x(d.date); }) .y0(function(d) { return y(0); }) .y1(function(d) { return y(d.count); }); var line = d3.svg.line() .interpolate(‘bundle‘) //This interpolate bundle is just going to give us nice, smooth curves when it interpolates the different points .x(function(d) { return x(d.date); }) .y(function(d) { return y(d.count); }); path .datum(data)//for only one object, path object .transition() .duration(450) .attr(‘d‘, line); } </script> </body> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> body { padding-top: 50px; padding-left: 100px; } #chart { width: 300px; height: 200px; border: 1px solid black; margin-top: 10px; } path { fill: purple; fill-opacity: 0.7; /*fill: none; stroke: blue; stroke-width: 3px;*/ } </style> </head> <body> <button onclick="updateChart(‘math‘)">Math</button> <button onclick="updateChart(‘science‘)">Science</button> <button onclick="updateChart(‘reading‘)">Reading</button> <div id="chart"></div> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script> <script> var w = 300; var h = 200; var path; var subjects; $.getJSON(‘//jsbin.com/vegaqi/1.js‘, function(json) { subjects = json; _.keys(subjects).forEach(function(subject) { subjects[subject].forEach(function(d) { d.date = d3.time.format("%Y%m%d").parse(d.date); console.log(d.date); }) }); path = d3.select(‘#chart‘) .append(‘svg‘) .attr(‘width‘, w) .attr(‘height‘, h) .append(‘g‘) .append(‘path‘); updateChart(‘math‘); }); function updateChart(subject) { var data = subjects[subject]; var dates = _.pluck(data, ‘date‘); var counts = _.pluck(data, ‘count‘); var x = d3.time.scale() .domain(d3.extent(dates))//d3.extent(), return [min, max] .range([0, w]); var y = d3.scale.linear() .domain(d3.extent(counts)) .range([h, 0]); var area = d3.svg.area() .interpolate(‘bundle‘) //This interpolate bundle is just going to give us nice, smooth curves when it interpolates the different points .x(function(d) { return x(d.date); }) .y0(function(d) { return y(0); }) .y1(function(d) { return y(d.count); }); var line = d3.svg.line() .interpolate(‘bundle‘) //This interpolate bundle is just going to give us nice, smooth curves when it interpolates the different points .x(function(d) { return x(d.date); }) .y(function(d) { return y(d.count); }); path .datum(data)//for only one object, path object .transition() .duration(450) .attr(‘d‘, area); } </script> </body> </html>
[D3] 14. Line and Area Charts with D3
标签：
原文地址：http://www.cnblogs.com/Answer1215/p/4555764.html
