Updating axes

At some point, you’re going to want to change your axes in response to a user clicking something. You should have a xAxis/yAxis variables somewhere in your code that use xPositionScale and yPositionScale to draw your axes (by “should” I mean “probably will if you cut and pasted from somewhere else”).

xAxis and yAxis always know what their scales are up to, so if you change the scale, it’s really easy to update the axis.

// Changing the x axis
d3.select("#some-button").on('click', function() {
  // STEP ONE: Update your scale
  xPositionScale.domain([0, 100])

  // STEP TWO: Change the position of your data elements
  d3.selectAll("circle")
    .attr("cx", function(d) {
        return xPositionScale(d.Age)
      })

  // STEP THREE: Update the displayed axis
  d3.select(".x-axis")
    .transition()
    .call(xAxis)
})