私はこの状況でどのように考えてもD3でBounded Panningを作ることができませんか？

Question

var data = [ 
{ 
    "nrPers": 500, 
    "actionDateStart": "2016-01-01T00:01:00", 
    "actionDateStop": "2016-01-01T00:02:00", 
    "tipRaport": 0 
}, 
{ 
    "nrPers": 600, 
    "actionDateStart": "2016-01-01T00:02:00", 
    "actionDateStop": "2016-01-01T00:03:00", 
    "tipRaport": 0 
}, 
{ 
    "nrPers": 900, 
    "actionDateStart": "2016-01-01T00:03:00", 
    "actionDateStop": "2016-01-01T00:04:00", 
    "tipRaport": 0 
}, 
{ 
    "nrPers": 50, 
    "actionDateStart": "2016-01-01T00:04:00", 
    "actionDateStop": "2016-01-01T00:05:00", 
    "tipRaport": 0 
}, 
{ 
    "nrPers": 5000, 
    "actionDateStart": "2016-01-01T00:05:00", 
    "actionDateStop": "2016-01-01T00:06:00", 
    "tipRaport": 0 
}, 
{ 
    "nrPers": 511, 
    "actionDateStart": "2016-01-01T00:06:00", 
    "actionDateStop": "2016-01-01T00:07:00", 
    "tipRaport": 0 
}, 
{ 
    "nrPers": 600, 
    "actionDateStart": "2016-01-01T00:07:00", 
    "actionDateStop": "2016-01-01T00:02:00", 
    "tipRaport": 0 
}, 
{ 
    "nrPers": 900, 
    "actionDateStart": "2016-01-01T00:08:00", 
    "actionDateStop": "2016-01-01T00:03:00", 
    "tipRaport": 0 
}, 
{ 
    "nrPers": 4500, 
    "actionDateStart": "2016-01-01T00:09:00", 
    "actionDateStop": "2016-01-01T00:04:00", 
    "tipRaport": 0 
}, 
{ 
    "nrPers": 590, 
    "actionDateStart": "2016-01-01T00:10:00", 
    "actionDateStop": "2016-01-01T00:05:00", 
    "tipRaport": 0 
}, 
{ 
    "nrPers": 5000, 
    "actionDateStart": "2016-01-01T00:11:00", 
    "actionDateStop": "2016-01-01T00:06:00", 
    "tipRaport": 0 
}, 
{ 
    "nrPers": 3647, 
    "actionDateStart": "2016-01-01T00:12:00", 
    "actionDateStop": "2016-01-01T01:07:00", 
    "tipRaport": 0 
}, 
{ 
    "nrPers": 1700, 
    "actionDateStart": "2016-01-01T00:01:00", 
    "actionDateStop": "2016-01-01T02:08:00", 
    "tipRaport": 0 
}, 
{ 
    "nrPers": 2400, 
    "actionDateStart": "2016-01-01T00:02:00", 
    "actionDateStop": "2016-01-01T00:03:00", 
    "tipRaport": 0 
}, 
{ 
    "nrPers": 500, 
    "actionDateStart": "2016-01-01T00:03:00", 
    "actionDateStop": "2016-01-01T00:07:00", 
    "tipRaport": 0 
}, 
{ 
    "nrPers": 1212, 
    "actionDateStart": "2016-01-01T00:04:00", 
    "actionDateStop": "2016-01-01T00:05:00", 
    "tipRaport": 0 
}, 
{ 
    "nrPers": 2324, 
    "actionDateStart": "2016-01-02T00:05:00", 
    "actionDateStop": "2016-01-02T00:06:00", 
    "tipRaport": 0 
}, 
{ 
    "nrPers": 5656, 
    "actionDateStart": "2016-02-02T00:06:00", 
    "actionDateStop": "2016-02-02T00:07:00", 
    "tipRaport": 0 
}, 
{ 
    "nrPers": 3222, 
    "actionDateStart": "2016-02-02T00:07:00", 
    "actionDateStop": "2016-02-02T00:08:00", 
    "tipRaport": 0 
}]; 

     var tip = d3.tip() 
     .attr('class', 'd3-tip') 
     .html(function (d) { return '<span>' + d.nrPers + '</span>' + ' clienti' }) 
     .offset([-12, 0]) 
     var w = 1100, 
      h = 400, 
      padt = 50, padr = 0, padb = 100, padl = 40, 
      x = d3.scale.ordinal().rangeRoundBands([0, w], .1); 
     y = d3.scale.linear().range([h, 0]), 
     yAxis = d3.svg.axis().scale(y).orient('left').tickSize(-w + padl + padr), 
     xAxis = d3.svg.axis().scale(x).orient("bottom"); 

     vis = d3.select('#graph') 
      .append('svg') 
      .attr('width', w) 
      .attr('height', h + padt + padb) 
     .append('g') 
      .attr('transform', 'translate(' + padl + ',' + padt + ')') 
     var max = d3.max(data, function (d) { return d.nrPers }) 

     x.domain(data.map(function (d) { return ((dateFormat(new Date(d.actionDateStart))).toString() + " - " + dateFormat(new Date(d.actionDateStop)).toString());})) 
     y.domain([0, max]) 
     vis.call(tip) 

     vis.append("g") 
     .attr("class", "x axis") 
     .attr("transform", "translate(0," + h + ")") 
     .call(xAxis) 
     .selectAll("text") 
     .style("text-anchor", "end") 
     .attr("dx", "-.8em") 
     .attr("dy", ".15em") 
     .attr("transform", "rotate(-65)"); 

     vis.append("g") 
      .attr("class", "y axis") 
      .call(yAxis) 

     var bars = vis.selectAll('g.bar') 
      .data(data) 
     .enter().append('g') 
      .attr('class', 'bar') 
      .attr('transform', function (d, i) { return "translate(" + x(i) + ", 0)" }) 
     bars.append('rect') 
      .attr('x', function (d) { return x(dateFormat(new Date(d.actionDateStart)).toString() + " - " + dateFormat(new Date(d.actionDateStop)).toString());}) 
      .attr('width', x.rangeBand()) 
      .attr('height', function (d) { return h - y(d.nrPers) }) 
      .attr('y', function (d) { return y(d.nrPers) }) 
      .on('mouseover', tip.show) 
      .on('mouseout', tip.hide) 
    }); 

Answer 1

制限付きパンニングを設定するには、svgに「rect」要素を追加します。 'RECT'

を付加した後、残りのロジックを追加

vis = d3.select('#graph') 
     .append('svg') 
     .attr('width', w) 
     .attr('height', h); 

vis.append('rect') 
    .attr('stroke', 'transparent') 
    .attr('fill', 'transparent') 
    .attr('x', 0) 
    .attr('y', 0) 
    .attr('width', //panning width) 
    .attr('height',//panning height) 
    .call(//this.action); 

てみてください