Syntax understanding problem

I would like to understand a few lines of this example:

The part is:

partition = data => {
      const root = d3.hierarchy(data)
        .sum(d => d.value)
        .sort((a, b) => b.height - a.height || b.value - a.value);
      return d3.partition().size([height, (root.height + 1) * width / 3])

My problem is with the last line. Why is there “(root)” there? Could this be rewritten in a simpler way?

This is some pretty normal syntax that is used in a pretty unusual way, so it often trips people up that haven’t seen it often. I’ll explain what’s going on with a slightly more verbose example.

d3.partition(), like many of d3’s tools, returns something that is both a function (you can call it) and an object (it has methods and properties). How this works under the hood isn’t too weird, but I’ll elide it for now.

That last line has a few things going on, and I’ll do them step by step. First, we make a partitioner by calling d3.partition.

const partitioner = d3.partition();

Next we configure the size used by the partitioner. The .size() method will either return the size if we don’t pass any arguments, or (like in this case) set the size and return the partitioner. This is a common behavior in d3, but uncommon in JS generally.

partitioner.size([height, (root.height + 1) * width / 3]);

Finally we call the partitioner with the root object, which will update each element of root with data about how to draw it.

return partitioner(root);

Hopefully you can see how the line in the example is equivalent to this expanded version. You’ll see this pattern in other d3 objects, like scales and line generators, though those usually aren’t all crammed onto one line.


Thank you very much for the detailed explanation!

This line drove me crazy.

Thank you very much!

This line drove me crazy…