Local state?

[mbostock]

Sometimes if feels like you have to use selection.each to create a context, define some local variables, and then access those variables via closure. That works okay, but it feels like it breaks the flow of writing normal D3 code, since you have to move anything that needs those local variables into the selection.each context. And if you need to run the same code again in the future, you have to recreate that same context.

You can embed the local state you need in the data, which is then accessible to functions, but this also isn’t ideal because the data isn’t automatically propagated to children via selection.selectAll, and because sometimes it’s awkward to decorate the data with the local state you need.

So what if, sort of like local variables in Protovis, there was a way to define local state in D3? That state would be bound to the element, similar to element.__data. But most importantly, when you access the local variable, a child element would automatically inherit the variable from an ancestor, rather than it needing to be explicitly propagated like data. (Also, it might be cleaner since you don’t have to mix your primary data with your local state.)

Something to figure out, though, is if a child wants to set the state, you’d want to disambiguate between setting the value of the parent’s local variable and creating a new local variable on the child of the same name that masks the parents value.

I’d also want some very concise syntax for accessing the local variable, since the feature conceptually competes with closures and selection.each, which is a native language feature!

[mbostock]

Added d3.local in 54541ab.

[curran]

This is an awesome feature. I'm using it already datavis-tech/reactive-vis#23