-
Notifications
You must be signed in to change notification settings - Fork 10
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
v3 API Changes #70
Comments
@curran in practice, when I need to access
the rest of the time, I use an arrow function. I arrived at this place by using lebab to automatically upgrade es5 code to es2015. its |
@micahstubbs Do you think this would be a worthwhile API change for d3-component? It would allow for use of arrow functions for lifecycle hooks, which is currently not possible. |
@curran don't have strong feelings about this. my intuition is that it would it remove a special case a user of d3-component has to remember, and that would be positive ☺ |
@curran I personally already have a strong habit of checking for this lexical this special case, hence the lack of strong feelings 😉 that said, it's important to think about the new user experience |
Yeah totally. It would one fewer WTF/minute. Dealing with I'm thinking to change the API from this (v2.X API): var myComponent = d3.component("div", "some-class")
.create(function (d, i, nodes){ // Invoked for entering component instances.
d3.select(this)
.style("font-size", "0px")
.transition()
.style("font-size", "80px");
})
.render(function (d, i, nodes){ // Invoked for entering AND updating instances.
d3.select(this).text(d);
})
.destroy(function (d, i, nodes){ // Invoked for exiting component instances.
return d3.select(this) // You can return a transition here to delay node removal.
.transition()
.style("font-size", "0px");
}); to this (v3.X API): var myComponent = d3.component("div", "some-class")
.create((selection, d, i) => { // Invoked for entering component instances.
selection
.style("font-size", "0px")
.transition()
.style("font-size", "80px");
})
.render((selection, d, i) => { // Invoked for entering AND updating instances.
selection.text(d);
})
.destroy((selection, d, i) => { // Invoked for exiting component instances.
return selection // You can return a transition here to delay node removal.
.transition()
.style("font-size", "0px");
}); Note that the third argument |
Philosophically speaking, each component should be responsible for managing things that only depend on the In hindsight, I modeled the API after the wrong thing, selection.each(). What the API should have been modeled after is selection.call(). A component is more like a function that gets passed into selection.call() than a function that gets passed into selection.each(). Therefore, I think the API should be: var myComponent = d3.component("div", "some-class")
.create((selection, d) => { // Invoked for entering component instances.
selection
.style("font-size", "0px")
.transition()
.style("font-size", "80px");
})
.render((selection, d) => { // Invoked for entering AND updating instances.
selection.text(d);
})
.destroy((selection, d) => { // Invoked for exiting component instances.
return selection // You can return a transition here to delay node removal.
.transition()
.style("font-size", "0px");
}); |
Summary of API changes between v2 and v3:
this
in create(), render(), destroy()nodes
into create(), render(), destroy()i
into create(), render(), destroy()Before:
.render(function (d, i, nodes){ var selection = d3.select(this);
After:
.render(function (selection, d){
One driving force is ES6 considerations. Using d3-component is awkward with ES6, because the API relies heavily on use of non-lexically-bound
this
. For the next major version of d3-component, I'd like to make the API more ES6-friendly.The decision for the original API was intentional, to mirror the API of D3's selection.each. However, it's unfortunate because we can't use ES6 arrow functions.
ES5:
ES6 (ideal):
Maybe we could pass in a selection:
ES6 (idea):
/cc @micahstubbs
The text was updated successfully, but these errors were encountered: