<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
var years = ["2011", "2012", "2013", "2014", "2015", "2016", "2017", "2018", "2019", "2020", "2021", "2022", "2023", "2024", "2025", "2026", "2027", "2028", "2029", "2030", "2031", "2032", "2033", "2034", "2035", "2036", "2037", "2038", "2039", "2040"]
var svg2 = d3.select('body').append('svg')
svg2.append('text') // comment out this line, and you should notice i === 0
var yearsList = svg2.selectAll("text")
.data(years)
.enter()
.append("text")
.attr("font-size","12")
.attr("font-family","calibri")
.attr("x", 50)
.attr("y", function(d,i) {return (( i * 14)+28)})
.text((function(d,i) {return i + " : " + d }))
</script>
</body>
</html>