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

【问题标题】：d3.js: ordinal scale and zoom/pand3.js：序数比例和缩放/平移
【发布时间】：2014-02-27 13:43:40
【问题描述】：

我有一个基本的 D3 条形图，带有序数 x 刻度和线性 y 刻度。

我添加了缩放功能，它适用于线性 y 比例。

我怎样才能让 x 比例随着缩放级别进行相应调整？

这是它现在的样子：http://jsfiddle.net/bM4HC/1/

下面的 js 不适用于序数刻度：

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

【问题讨论】：

This example 展示了如何根据缩放调整 x 轴和 y 轴。
该示例引用了线性刻度。我正在与序数作斗争。
您不能将序数比例链接到缩放行为，因为缩放行为将尝试使用线性比例的[min, max] 格式更改比例的域。请参阅this related question about brushing functions 以了解解决方法，如果还有什么你不知道的，请告诉我。

标签： javascript d3.js

【解决方案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/

【讨论】：

这真的很有帮助；感谢分享！你如何剪辑数据，这样域外的东西就不会出现？我正在使用另一个使用 clip-path 的 d3 缩放示例，但是当 svg 元素被翻译和缩放时，这似乎不起作用。
@dino 不客气，使用 clip-path 是一种方法，这是一个更新的示例：jsfiddle.net/9rypxf10。