d3 change and update axis domain scatterplot - d3.js

Question

I am working on a scatterplot in d3 where I need to be able to update the yAxis domain when I click on a button.
This is what I have right now. This is the lowest and highest value.
yAxis = d3.scaleLinear().rangeRound([height, 0]);
yAxis.domain([23500, 29600]);
How can I change the Domain to like domain([26500, 33600]) when I click on a button?
Do I need to add it to the buttons with a click function?
d3.select('#data2010').on('click', function () {
Or is there a way to automatically look for the lowest and highest value and update it?

Answer 1

This is a simple example on how to update a domain and rescale an axis.
You need to get something from the user to be able to know when to rescale the axis. So that click event has to come from some mode of input like a button, radio button, checkbox, etc.
First off, you need to update the domain for the scale that you're using for your y-axis.
Call .transition() with a .duration() with a set timeframe for the axis to transition when the user wants it to rescale.
You can accomplish the above with something like the following (You call the function when your button is clicked):
function rescale() {
y.domain([26500, 33600])
svg.selectAll("g.yaxis")
.transition().duration(1000)
.call(d3.axisLeft(y));
}
Check working snippet below:
var margin = {
top: 20,
right: 80,
bottom: 30,
left: 50
},
width = 500 - margin.left - margin.right,
height = 400 - margin.top - margin.bottom;
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var y = d3.scaleLinear().range([height, 0]);
y.domain([23500, 29600]);
svg.append("g")
.attr("class", "yaxis")
.call(d3.axisLeft(y));
function rescale() {
y.domain([26500, 33600])
svg.selectAll("g.yaxis")
.transition().duration(1000)
.call(d3.axisLeft(y));
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.8.0/d3.min.js"></script>
<button onclick="rescale();">Rescale</button>