Horizontal pan with ordinal x axis in d3

Question

I would like to have vertical zooming and horizontal panning with a simple bar chart. Here's my example: http://jsfiddle.net/bjames/rR7ee/.

Most of what I've tried involves viewBox and I understand I might have more luck with a clipPath. But all the examples I've found use a continuous x-axis in the zoom function to get the job done.

In my example, there are 8 bars but only 4 are visible. I'd like to drag the panel to the left. What am I missing?

Thanks in advance.

width = 600
height = 600
padding = {left:40, top:20, right:20, bottom:30}
size = {
    x: width - padding.left - padding.right,
    y: height - padding.top - padding.bottom
}
var svg = d3.select('.container').append('div')
    .append("svg")
    .attr("width", 300)
    .attr("height", height)
    .attr('class', 'frame')
    .append("g")
    .attr("transform", "translate(" + padding.left + "," + 
          padding.top + ")")


svg.append('rect')
    .attr('class', 'background')
    .attr('pointer-events', 'all')
    .attr('fill', 'none')
    .attr('height', size.y + 'px')
    .attr('width', size.x + 'px')


var d = [5,6,7,8,9,10,11,12]

var x = d3.scale.ordinal()
      .domain(d3.range(d.length))
      .rangeRoundBands([0, size.x], .15)

var y = d3.scale.linear()
            .domain([0,d3.max(d)])
            .range([size.y, 0])

var xax = d3.svg.axis().scale(x)
            .tickSize(-size.y).orient('bottom')

var yax = d3.svg.axis().scale(y)
            .tickSize(-size.x).orient('left')

svg.append("g")
    .attr("class", "y axis")
    .call(yax)

svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + size.y+ ")")
    .call(xax)

svg.append('g').attr('class', 'rects')

function update(){

    var rects = d3.select('.rects').selectAll('rect')
                    .data(d)

    rects.attr('x', function(d,i) { return x(i)})
        .attr('width', x.rangeBand())
        .attr('y',  function(d) { return y(d)})
        .attr('height', function(d) { return size.y - y(d)})

    rects.enter().append('rect')
        .attr('x', function(d,i) { return x(i) })
        .attr('width', x.rangeBand())
        .attr('y',  function(d) { return y(d)})
        .attr('height', function(d) { return size.y - y(d)})
        .style('fill', 'orange')
    svg.select('.y.axis')
        .call(yax)
    svg.select('.x.axis')
        .call(xax)
    svg.select('.background')
        .call(zoom)
}


var zoom = d3.behavior.zoom()
          .on("zoom", zoomed)

function zoomed() {
    y.domain([0, d3.max(d)*1/d3.event.scale])
    update();
}
update()

Answer 1

The vertical zooming was already implemented. I implemented the horizontal panning.

Note: Both zooming and panning happens on the rectangle in the background, as listeners attached to it.

I have added comments in the fiddle code that should help you out in the logic.

width = 600
height = 600
padding = {left:40, top:20, right:20, bottom:30}
size = {
    x: width - padding.left - padding.right,
    y: height - padding.top - padding.bottom
}
var svg = d3.select('.container').append('div')
    .append("svg")
    .attr("width", 300)
    .attr("height", height)
    .attr('class', 'frame')
    .append("g")
    .attr("transform", "translate(" + padding.left + "," + 
          padding.top + ")")



svg.append('rect')
    .attr('class', 'background')
    .attr('pointer-events', 'all')
    .attr('fill', 'none')
    .attr('height', size.y + 'px')
    .attr('width', size.x + 'px')


var d = [5,6,7,8,9,10,11,12]

var x = d3.scale.ordinal()
      .domain(d3.range(d.length))
      .rangeRoundBands([0, size.x], .15)

var y = d3.scale.linear()
            .domain([0,d3.max(d)])
            .range([size.y, 0])

var xax = d3.svg.axis().scale(x)
            .tickSize(-size.y).orient('bottom')

var yax = d3.svg.axis().scale(y)
            .tickSize(-size.x).orient('left')

svg.append("g")
    .attr("class", "y axis")
    .call(yax)

svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + size.y+ ")")
    .call(xax)
var svg1 = svg.append('svg')
    .attr('height', size.y + 'px')
    .attr('width', size.x + 'px')
svg1.append('g').attr('class', 'rects')

function update(){

    var rects = d3.select('.rects').selectAll('rect')
                    .data(d)

    rects.attr('x', function(d,i) { return x(i)})
        .attr('width', x.rangeBand())
        .attr('y',  function(d) { return y(d)})
        .attr('height', function(d) { return size.y - y(d)})

    rects.enter().append('rect')
        .attr('x', function(d,i) { return x(i) })
        .attr('width', x.rangeBand())
        .attr('y',  function(d) { return y(d)})
        .attr('height', function(d) { return size.y - y(d)})
        .style('fill', 'orange')
    svg.select('.y.axis')
        .call(yax)
    svg.select('.x.axis')
        .call(xax)
    svg.select('.background')
        .call(zoom)
    svg.select('.background')
        .call(drag)
}


var zoom = d3.behavior.zoom()
          .on("zoom", zoomed)

function zoomed() {
    y.domain([0, d3.max(d)*1/d3.event.scale])
    update();
}
var drag = d3.behavior.drag()
    .on("drag", dragmove).on("dragstart", dragstart);

 var moved = 0;//record the translate x moved by the g which contains the bars.
 var dragStartX = 0;//record the point from where the drag started
 var oldTranslateX = 0;

function dragstart(d){
    dragStartX = d3.event.sourceEvent.clientX;
    oldTranslateX = moved;//record the old translate 
     console.log(d3.event)  
}
function dragmove(d) {
  var x = d3.event.x;
  var y = d3.event.y;
  var dx =   x-dragStartX 
  x = dx + oldTranslateX + 50; //add the old translate to the dx to get the resultant translate
  moved = x; //record the translate x given
  //move the bars via translate x
  d3.select('.rects').attr("transform", "translate(" + x + "," + 0 + ")");
    //move the x axis via translate x
  d3.select('.x').attr("transform", "translate("+x +" ," + size.y+ ")")
}
update()

Here is the fiddle: http://jsfiddle.net/cyril123/o0qeom7n/3/