The rect
which has the zoom
should have fill
set to none
.
You need to do more than just reset the axis
to pan the graph: you also need to redraw the rects
. And it is ill-advised to use and override globals in the same file.
function zoomed() {
// Bar charts (Cannot be seen unless we delete rect from the code above)
rects = d3.select('#chart svg')
.selectAll('rect.data')
.data(data, function (d) {
return d.timestamp;
});
rects.enter()
.append('rect')
.classed('data', true);
rects.attr('x', function (d) {
return x(d.timestamp);
})
.attr('y', function (d) {
return y(d.value);
})
.attr('timestamp', function (d) {
return d.timestamp
})
.attr('width', 4)
.attr('height', 10)
.attr('fill', 'red')
.attr("transform", "translate(" + margin + "," + margin + ")");
chart.select(".x.axis").call(xAxis);
chart.select(".y.axis").call(yAxis);
}
// ...
d3.select('#chart svg').append('rect')
.classed('bg', true)
.attr('width', width)
.attr('height', height)
.attr('fill', 'none')
.attr('pointer-events', 'all')
.call(zoom);
zoomed();
This is a working demo: http://jsfiddle.net/MLYaQ/1/
You can use clipPath to limit the visible region of the chart.