javascript - 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:这是一个更新的示例，包含 clip-path : http://jsfiddle.net/9rypxf10/