Question

Say we have a y-scale that converts the data domain to rangebands that are 20px for each data element.

var y = d3.scale.ordinal()
    .domain(data)
    .rangeBands([0, 20 * data.length]);

I would normally use this scale to determine the y-coordinate of something in this manner:

svg.selectAll("rect")
    .data(data)
    .enter()
    .append("rect")
    .attr("y", y)

But in some tutorials, I’ve seen an alternative syntax.

.attr("y", function(d) { return y(d); })

I’m not sure what’s going on here, and I would like to understand it before I move on with learning D3. I know y is a function, so the d within parenthesis would be an argument of that function. But we already specified the data input in the y function. I would love to read an explanation of what we’re actually doing with y(d). What are the pros and cons of the two alternatives?

Answer 1

I think that’s a minor difference that’s maybe left over from copying and pasting other attrs that are set with an anonymous function (as in the second case). There should be no reason to wrap y in an anonymous function.