D3.js Quick Start Guide

Updating axes when zooming and panning

Now when we zoom, the points move in/out. When we pan, they move vertically/horizontally. Unfortunately, the axes don't update accordingly. Let's first add IDs to the <g> elements that contain them. Find the following code:

var bottomAxis = d3.axisBottom(xScale);d3.select('svg')    .append('g')    .call(bottomAxis)    .attr('transform', 'translate(0,'+HEIGHT+')');var leftAxis = d3.axisLeft(yScale);d3.select('svg')    .append('g')    .call(leftAxis);

Add .attr('id', 'x-axis') after the first .append('g'), and .attr('id', 'y-axis') after the second .append('g'):

d3.select('svg')    .append('g')    .attr('id', 'x-axis') //add an id    .call(bottomAxis)    .attr('transform', 'translate(0,'+HEIGHT+')');var leftAxis = d3.axisLeft(yScale); ...