Panning a bar chart in d3.js

Question

I'm new to d3.js and in my code below (which is also on jsfiddle), I am experiencing 2 problems

1. The first rect being added seems to block the bar charts being added in the code below. Panning using mouse drag on the rect seems to work!

2. Deleting the rect reveals the bar chart. But panning by dragging on the canvas no longer pans the view.

I want the bar chart to be revealed, and panning to work by dragging in the chart region. Any help strongly appreciated, thank you!

jsfiddle: http://jsfiddle.net/MLYaQ/

Answer 1

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.