1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>基础条形图</title> 6 </head> 7 <body> 9 <div id="chart"></div> 10 11 <script src="js/d3.v3.min.js"></script> 12 <script> 13 14 drawLineBar(‘#chart‘) 15 17 function drawLineBar(selector) { 18 19 // 示例数据 20 var dataset = [ 5, 10, 15, 20, 30, 50 ] 21 var width = 500, 22 height = 500 23 24 // 创建线性比例尺 25 var scale = d3.scale.linear() 26 .domain([0, d3.max(dataset)]) 27 .range([0, height])30 31 // 创建svg 32 var svg = d3.select(selector) 33 .append(‘svg‘) 34 .attr(‘width‘, width) 35 .attr(‘height‘, height) 36 37 // 绘制条形图 38 svg.selectAll(‘rect‘) 39 .data(dataset) 40 .enter() 41 .append(‘rect‘) 42 .attr(‘width‘, ‘20px‘) 43 .attr(‘height‘, function(d, i) { 44 45 return scale(d) 46 }) 47 .attr(‘y‘, function(d, i) { 48 49 return height - scale(d) 50 }) 51 .attr(‘x‘, function(d, i) { 52 53 return i * (width / dataset.length) 54 }) 55 .attr(‘fill‘, ‘#457eb4‘)77 } 78 79 </script> 80 </body> 81 </html>
原文：http://www.cnblogs.com/sunken/p/4366824.html