It seems that every time a callback is set, d3 loops through the entire array.
Initially, I thought that functions like attr() or each() were added to a pipeline and executed all at once later on.
I was trying to dynamically process my data within d3's SINGLE loop, and had just discovered each(), which calls a function for each point.
The aim was to convert my points from a javascript object to a single value without having to do so for each callback or in a separate loop.
I tested it out and observed this behavior.
Here is a simple example:
d3.select(ref)
.selectAll("rect")
.data(data)
.enter()
.append("rect")
.each(function(d) { console.log(d); })
.attr("y", function(d) { console.log("attr y"); return 10; })
.attr("fill", function(d) { console.log("fill"); return "red";})
And here is a jsfiddle link: http://jsfiddle.net/7q3p2kah/1/
I expected to see:
red
attr y
fill
green
attr y
fill
...
But what I got was:
red
green
blue
yellow
black
(4)attr y
(4)fill
The purpose of this experiment is to reduce the time taken to display my graphs.
Do I have to use a separate loop to process my data, or is there something I am missing?
Although it may seem like a yes() or no() question, I would appreciate any explanations or alternative solutions.