foreach vs for

by Ryan

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>

JavaScript

var chartData = [{data: "one"}, {data: "two"}, {data: "three"}];
var body = d3.select("body");

body.append("div").attr("style", "font-weight:bold;").text("foreach");
chartData.forEach(function(d){
    var chartDataItem = d;
    var onClick = function(d){
        alert(chartDataItem.data);
    }

    var div = body.append("div");
    var words = div.selectAll("div").data([chartDataItem]);
    words.enter().append("div").text(function(d) { return d.data; } ).on("click", onClick);    
});

body.append("br");
body.append("div").attr("style", "font-weight:bold;").text("for loop");
for(var i=0; i<chartData.length; i++){
    var chartDataItem = chartData[i];
    var onClick = function(d){
        alert(chartDataItem.data);
    }

    var div = body.append("div");
    var words = div.selectAll("div").data([chartDataItem]);
    words.enter().append("div").text(function(d) { return d.data; } ).on("click", onClick);    
}