D3 function only iterating though last point of data in an array.

问题

For the following lines of code, once I enter my locationArray into the data, the iteration runs for the length of the array, but starts on the final iteration such that i is always = 1 (the array has a length of two nested arrays). Why won't it start with array[0]?

var canvas = d3.select("#map-canvas");
setTimeout(function(){
  console.log(canvas)

  canvas
    .selectAll(".marker")
    .append('svg')
    .attr('width', 400)
    .attr('height', 400)
    .style("position", "relative")
    .style("right", 150)
    .style("bottom", function() {
      return 150;
    })
var marker = canvas.selectAll(".marker")
  console.log(marker)
  marker
  .selectAll('svg')
    .data(locationsArray)
    .enter()
    .append('circle')
    .attr("fill", "magenta")
    .attr("r", 15)
    .attr("cx", 165)
    .attr("cy", 165)
    .attr("class", function(d, i) {
      console.log(d + i)
    if (d[3] >= 30 && d[3] < 60) {
      d[2] == 1 ? result = "smallBadVibe" :
      d[2] == 2 ? result = "smallNeutralVibe" : result = "smallGoodVibe";
      console.log(result)
      return result;
    }    

来源：https://stackoverflow.com/questions/31234678/d3-function-only-iterating-though-last-point-of-data-in-an-array