Limit zoom and pan in d3
I am trying to properly constrain the zoom and zoom in my d3 diagram using the d3 Zoom Behavior. I've reduced the problem down to the following minimal runnable example. I want the user not to be able to zoom in so he can see below the 0-line on the y-axis.
The sample works when not zoomed out, setting translateExtent
to the full height of the svg, but this of course breaks down once the user zooms in a little. In fact, the further you zoom in, the further you can look into the negative area.
What do I need to install translateExtent
on?
The reason I redraw the line and axes on every zoom event is because I usually use react to render my svg and use d3 just for computation. However, I removed the react dependency to provide a more concise example.
const data = [ 0, 15, 30, 32, 44, 57, 60, 60, 85];
// set up dimensions and margins
const full = { w: 200, h: 200 };
const pct = { w: 0.7, h: 0.7 };
const dims = { w: pct.w * full.w, h: pct.h * full.h };
const margin = { w: (full.w - dims.w)/2, h: (full.h - dims.h)/2 };
// scales
const x = d3.scaleLinear()
.rangeRound([0, dims.w])
.domain([0, data.length]);
const y = d3.scaleLinear()
.rangeRound([dims.h, 0])
.domain(d3.extent(data));
// axes
const axes = {
x: d3.axisBottom().scale(x).tickSize(-dims.w),
y: d3.axisLeft().scale(y).tickSize(-dims.h)
}
const g = d3.select('.center');
// actual "charting area"
g
.attr('transform', `translate(${margin.w}, ${margin.h})`)
.attr('width', dims.w)
.attr('height', dims.h)
// x-axis
g.append('g')
.attr('transform', `translate(0, ${dims.h})`)
.attr('class', 'axis x')
.call(axes.x)
// y-axis
g.append('g')
.attr('class', 'axis y')
.call(axes.y)
// generator for the line
const line = d3.line()
.x( (_, i) => x(i) )
.y( d => y(d) );
// the actual data path
const path = g
.append('path')
.attr('class', 'path')
.attr('d', line(data))
.attr('stroke', 'black')
.attr('fill', 'none')
const zoomBehaviour = d3.zoom()
.scaleExtent([1, 10])
.translateExtent([[0,0], [Infinity, full.h]])
.on('zoom', zoom);
d3.select('svg.chart').call(zoomBehaviour);
function zoom() {
const t = d3.event.transform;
const scaledX = t.rescaleX(x);
const scaledY = t.rescaleY(y);
axes.x.scale(scaledX);
axes.y.scale(scaledY);
d3.select('.axis.x').call(axes.x);
d3.select('.axis.y').call(axes.y);
line
.x( (_, i) => scaledX(i) )
.y( d => scaledY(d) );
const scaledPath = path.attr('d', line(data));
}
body {
width: 200px;
height: 200px;
}
svg.chart {
width: 200px;
height: 200px;
border: 1px solid black;
}
.axis line, .axis path {
stroke: grey;
}
<script src="https://d3js.org/d3.v4.js"></script>
<body>
<svg class="chart">
<g class="center"></g>
</svg>
</body>
source to share
Note the function zoomed
in this example by Mike Bostock , who I believe does what you want, the key part is mutation t.x
and / or t.y
if there is a constraint violation:
function zoomed() {
var t = d3.event.transform;
if (t.invertX(0) > x0) t.x = -x0 * t.k;
else if (t.invertX(width) < x1) t.x = width - x1 * t.k;
if (t.invertY(0) > y0) t.y = -y0 * t.k;
else if (t.invertY(height) < y1) t.y = height - y1 * t.k;
g.attr("transform", t);
}
source to share
I was able to get it to work based on suggestions made by Robert. I had to tweak the conditions a bit to match my use case:
const dims = /* object holding svg width and height */;
const [xMin, xMax] = this.scales.x.domain().map(d => this.scales.x(d));
const [yMin, yMax] = this.scales.y.domain().map(d => this.scales.y(d));
if (t.invertX(xMin) < 0) {
t.x = -xMin * t.k;
}
if (t.invertX(xMax) > dims.width) {
t.x = xMax - dims.width * t.k;
}
if (t.invertY(yMax) < 0) {
t.y = -yMax * t.k;
}
if (t.invertY(yMin) > dims.height) {
t.y = yMin - dims.height * t.k;
}
source to share