how to update page elements with each() iteration?

Question

i want to update the message count

element at each iteration of the each(). How can i do that? I have put a counter that is incremented at each iteration. but it does not work.

cityMarkerCanvas.each(function(d,ienter code here) {
    var count=1;
    var self = this;
    var cb = function(){
         $( "#inner1" ).append( "<p>Current tweet count:"+count+"</p>" );
         var coords = projection([d.Lat, d.Long]); 
         d3.select(self)
            .attr("cx", function(d) {
                return coords[0];
             })
             .attr("cy", function(d) {
                return coords[1];
             })
             .transition()
             .attr("r", 3)
             .attr("opacity", 1.0)
             .duration(1000);
             //console.log(i);
         count++;
    }
    setTimeout(cb, 200*i);
})

Answer 1

You have to initialise count before your each loop like,

var count=1;
cityMarkerCanvas.each(function(d,i) {
    var self = this;
    var cb = function(){
       $( "#inner1" ).append( "<p>Current tweet count:"+(count++)+"</p>" );
       var coords = projection([d.Lat, d.Long]); 
       d3.select(self)
         .attr("cx", function(d) {
            return coords[0];
         })
         .attr("cy", function(d) {
            return coords[1];
         })
         .transition()
         .attr("r", 3)
         .attr("opacity", 1.0)
         .duration(1000);
    }
    setTimeout(cb, 200*i);
});

You can use (i+1) in place of (count++) without using count variable.