Search⌘ K
Home
Courses
Master D3.js for Data Visualization

Fixing the Transition

Explore how to fix transition issues in D3.js by manually setting starting positions for bar elements and adding animation durations. This lesson teaches you to override default behaviors to ensure smooth entry animations, making your data visualizations more dynamic and visually effective.

We'll cover the following...

In this lecture, we are going to start fixing the transition. We know where the problem lies. For shapes entering the document, their starting positions are not ideal. We will want to change their starting positions before starting the animation.

Manually handling the selections

If we want to set the initial coordinates for the bars before starting the transition, we will need to override the join() function’s default behavior. The argument we are passing into the join() function is a string. It is the name of the element we want to add, update, or remove. Instead of passing in a string, we will pass in an arrow function.

Javascript (babel-node)
// Draw Bars
ctr.selectAll('rect')
  .data(newDataset)
  .join(
    (enter) => enter.append('rect')
      .attr('width', d => d3.max([0, xScale(d.x1) - xScale(d.x0) - padding]))
      .attr("height", 0)
      .attr('x', d => xScale(d.x0))
      .attr("y", dimensions.ctrHeight)
      .attr('fill', '#01c5c4')
  )
  .transition()
  .attr('width', d => d3.max([0, xScale(d.x1) - xScale(d.x0) - padding]))
  .attr("height", d => dimensions.ctrHeight - yScale(yAccessor(d)))
  .attr('x', d => xScale(d.x0))
  .attr("y", d => yScale(yAccessor(d)))
  .attr('fill', '#01c5c4')

The first function we pass into the join() function will be for the enter selection, which is great because it is the selection we want to modify. We will be ...