D3.js 在d3中具有顺序x轴的水平平移

我想有一个简单的条形图垂直缩放和水平平移。下面是我的例子：

我尝试的大部分内容都涉及到

viewBox

，我知道我可能会更幸运地使用

clipPath

。但我发现的所有示例都使用缩放功能中的连续x轴来完成工作

在我的示例中，有8个条形图，但只有4个可见。我想把面板拖到左边。我错过了什么

提前谢谢

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()

---

垂直缩放已经实现。我实现了水平平移

注意：当侦听器连接到背景中的矩形时，缩放和平移都发生在该矩形上

我在fiddle代码中添加了注释，这应该可以帮助您解决逻辑问题

---

这是小提琴：

炸药。这个问题太老了，我现在没有时间去读，但它显然有效，所以我称之为赢家。我很高兴能再看一遍。看起来平移时x轴标签没有被正确隐藏。标签刚好延伸到图形的边缘。您知道如何解决此问题吗？缩放和拖动行为仅在背景上可用，而在鼠标指针位于矩形上方时不可用。也许，您希望添加类似于

svg1.attr（'pointer-events'，'none'）

的内容，以便能够缩放和拖动整个svg。“看，”高积云，我觉得这样更好。至少我是这样计划的。一般来说，我希望在几何对象上出现某种鼠标悬停事件。通常会有足够的空间进行缩放和拖动。只是我的意见。@JohnZeller，把轴固定在一个rect或svg上就行了。我认为有些溢出是好的，因为通常情况下，对于序号标签，您希望有更多的空间来阅读标签文本-通常它们不是数字。

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()