I am currently working on a D3 script that involves a function called drawWorkingLife. This function is responsible for appending 11 images to an SVG. However, I have noticed that the script seems to skip appending the 8th image.
During my debugging process, I observed that when I log the x and y attributes being added to the images, index 8 is not being logged.
Could someone please explain why index number 8 is not appearing in the console log within the drawWorkingLife function below?
Demo:
Repo: https://github.com/radiocontrolled/sevenAteNine
function drawWorkingLife() {
var work = svg.selectAll("image")
.data(workingLife, function(d,i) {
return d[i];
})
.enter()
.append("g");
work
.append("svg:image")
.attr(opts)
.attr({
"x" : function(d,i) {
console.log(i);
// what causes index 8 to be skipped?
},
"y" : function(d,i) {
console.log(i);
// what causes index 8 to be skipped?
},
"class" : function(d,i){
return d;
}
})
.transition()
.duration(1000)
.style("opacity", 1);
}