<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>Angular Scope &</title> <link href="foundation.min.css" rel="stylesheet"/> <link href="app.css" rel="stylesheet"/> <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> <script src="angular.min.js"></script> </head> <body> <script> var dataset = [5, 10, 15, 20, 25]; d3.select('body').selectAll('div') .data(dataset) .enter() .append('div') .attr('class', 'bar') .style('height', function (d) { return d * 7 + 'px'; }); </script> </body> </html>
body{ padding-top: 50px; padding-lleft: 100px; } .bar{ display: inline-block; width: 20px; height: 75px; margin-right: 2px; background-color: teal; overflow: hidden; } .bar:nth-child(2n+1){ background-color: aqua; }