d3.js:序数比例和缩放/平移

Question

我有一个基本的D3条形图,有序x尺度和线性y尺度.

我添加了缩放功能,它可以正常使用线性y刻度.

如何通过缩放级别使x-scale进行相应调整？

以下是它现在的样子:http://jsfiddle.net/bM4HC/1/

下面的js不适用于序数尺度:

d3.behavior.zoom() .x(x);

Answer 1

这是这样做的方法:

function zoom() {
  bars.attr("transform", "translate(" + d3.event.translate[0]+",0)scale(" + d3.event.scale + ",1)");

  chart.select(".x.axis")
    .attr("transform", "translate(" + d3.event.translate[0]+","+(height)+")")
    .call(xAxis.scale(x.rangeRoundBands([0, width * d3.event.scale],.1 * d3.event.scale)));

  chart.select(".y.axis")
    .call(yAxis);
}

http://jsfiddle.net/0917vvqt/

只需平移和缩放X中的条而不是x和y,也可以使用d3.event.translate [0](x轴)转换xAxis.

编辑1: 这是一个带剪辑路径的更新示例:http: //jsfiddle.net/9rypxf10/