d3 / d3-transition

Animated transitions for D3 selections.
https://d3js.org/d3-transition
ISC License
223 stars 65 forks source link

transition.selectChild[ren] #121

Closed CodeSmith32 closed 3 years ago

CodeSmith32 commented 3 years ago

Similar to the recently added features in d3-selection, I noticed transitions lack the functions,

transition.selectChild(...)
transition.selectChildren(...)

I found it's often convenient to be able to rely on the tight coherencies between the selection and transition modules; e.g.:

var elem = d3.select('.my-elem');

if(condition) {
    elem = elem.transition()
        .duration(500)
        .ease(d3.easeExpOut);
}

elem.attr('opacity', 1)
    .selectChildren('rect')
        .attr('fill', 'green')
        .attr(...)
        ...

But, in this case it doesn't comply. Hope to see these get added soon!

CodeSmith32 commented 3 years ago

For those with the same issue, please note the following can be used for now as a work-around:

// define a helper function for conciseness
// (could be placed inline instead, but cannot be an arrow function)
function children() {
    return this.children;
}

var elem = d3.select('.my-elem');

if(condition) {
    elem = elem.transition()
        .duration(500)
        .ease(d3.easeExpOut);
}

elem.attr('opacity', 1)
    .selectAll(children).filter('rect') // use filter if selecting specific children
        .attr('fill', 'green')
        .attr(...)
        ...
Fil commented 3 years ago

We should do definitely do this, with https://github.com/d3/d3-selection/pull/276