Passing variable i to D3 function

Question

I am running D3 in a loop. I would like to pass variable 'i' in a D3 function, but I am unable to do so. Here is my code -can you please tell me what I am doing wrong?

works perfectly fine

.style("fill", dataz[i].color) 

does not work

.style("fill-opacity", function(d, i) {
            if (dataz[i].color === "#ffff") {
              return "0";
            });

full code

  for (i = 0; i < dataz.length; i++) {
    d3.select(list[i])
      .style("fill", dataz[i].color)
      .style("fill-opacity", function(d, i) {
        if (dataz[i].color === "#ffff") {
          return "0";
        } else {
          return "0.5"
        }
      })
  }

Answer 1

As a general rule, you don't need loops when using D3. It's (normally) completely unnecessary, given what D3 does with the data. It's true that we do use loops sometimes in a D3 dataviz, but only in very specific situations, to solve very specific problems. For the majority of situations, when we see a D3 code using a loop, we tend to think that that code is not using D3 capabilities correctly (also, in your code, you're mixing the i in the for loop with the i in the anonymous function. They are not the same).

So, to access your data array using the second argument, which is the index, forget about for loops: you just need to pass it in your selection.

Here is a simple example, using an enter selection. We check if the dataz value is blue. If it is, we set the opacity to 0.1:

var svg = d3.select("svg");

var dataz = ["teal", "brown", "blue", "purple"];

var circles = svg.selectAll(".circles")
    .data(dataz)
    .enter()
    .append("circle");

circles.attr("r", 20)
    .attr("cy", 50)
    .attr("cx", (d, i) => i * 50 + 40)
    .attr("fill", d => d)
    .attr("stroke", "black")
    .style("fill-opacity", (d, i) => dataz[i] === "blue" ? 0.1 : 1)

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg></svg>

Pay attention to this: in my snippet above, dataz[i] is the same of d (the datum itself).

Explaining the problem with your code:

The i in the anonymous function is not the i in the loop. Due to the scope of the function, when you do console.log(i) inside the anonymous function, you're logging the second argument, or index, which in this demo is always zero:

var dataz = ["teal", "brown", "blue", "purple"];

for (var i = 0; i < dataz.length; i++) {
    d3.select("body").attr("fill", (d,i)=>console.log("the value of i is: " + i));
}

<script src="https://d3js.org/d3.v4.min.js"></script>

A simple solution is changing the variable name of the for loop (or the second argument, it doesn't matter). Check this demo, the second argument (i) is always zero, but the loop (j) goes from 0 to 3 (you don't need let here, it works with var):

var dataz = ["teal", "brown", "blue", "purple"];

for (var j = 0; j < dataz.length; j++) {
    d3.select("body").attr("fill", (d,i)=>console.log("second argument:" + i + " - loop:" + j));
}

<script src="https://d3js.org/d3.v4.min.js"></script>

Answer 2

Disregarding the name of the variables (that could be the issue on other cases), the problem here is due to the loop index variable not existing or having a different value when accessed from the D3js data function.

The only way to make sure the current loop's value is used inside the data function is to supply it when creating the data function, so this index value exists inside the data function's scope.

This should work (didn't try!):

  for (idx = 0; idx < dataz.length; idx++) {
    d3.select(list[idx])
      .style("fill", dataz[i].color)
      // Immediately Invoked Function Expression will do the trick!
      .style("fill-opacity", (function(d, i) {
        if (dataz[idx].color === "#ffff") {
          return "0";
        } else {
          return "0.5"
        }
      })(idx));
  }