Can you chain a function after a transition without it being a part of the transition?

For instance if I wanted to transition the yAxis domain I can do this

this.yAxis
    .transition()
    .call(this.createYAxis)
    .attr('transform', `translate( ${this.Axes.Y.offset}, 0 )`);

I'd also like to set the text size in the same selection, but I don't want to animate the text size. Is this possible in the same chain? For instance,

this.yAxis
    .transition()
    .call(this.createYAxis)
    .attr('transform', `translate( ${this.Axes.Y.offset}, 0 )`)
    //I don't want anything past this point to be a part of the transition
  .selectAll('text')
    .style('font-size', '15px');

Right now I'm just using two separate calls like so

this.yAxis
    .transition()
    .call(this.createYAxis)
    .attr('transform', `translate( ${this.Axes.Y.offset}, 0 )`);

this.yAxis.selectAll( 'text')
   .style( 'font-size', '15px' )

Answers:

Answer

As of D3 v4 there is a method transition.selection() which

Returns the selection corresponding to this transition.

By means of this method you can break free from the transition started beforehand by selection.transition(). This enables continued method chaining acting on the selection instead of the transition.

var svg = d3.select("svg");

var scale = d3.scalePoint()
  .domain(["foo", "bar", "baz"])
  .range([30, 270]);

var axis = d3.axisBottom(scale);

var gX = svg.append("g")
  .transition()
    .duration(1000)
  .call(axis)
    .attr("transform", "translate(0,50)")
  .selection()   // <-- get the selection corresponding to the transition
    .style("font-size", "26px");
<script src="https://d3js.org/d3.v4.js"></script>
<svg></svg>

Answer

Here is the example of executing the update after the transition, now I don't know why anyone would want to have this particular font change happen after , but I use this all the time when I need to turn something off until the transition ends and then turn it back on.

var svg = d3.select("svg");

var scale = d3.scalePoint()
  .domain(["foo", "bar", "baz"])
  .range([30, 270]);

var axis = d3.axisBottom(scale);

var gX = svg.append("g")
  .transition()
  .duration(1000)
  .call(axis)
  .attr("transform", "translate(0,50)")
  .on('end', () => {
        d3.selectAll( 'text')
       .style( 'font-size', '15px')
   });
<script src="https://d3js.org/d3.v4.min.js"></script>
<svg></svg>

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.