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

Question

我有一个基本的D3条形图，其中x轴是序数比例尺，y轴是线性比例尺。

我添加了缩放功能，对于线性比例尺它可以正常工作。

如何使得x轴随着缩放水平相应地调整？

这是当前的情况：http://jsfiddle.net/bM4HC/1/ 下面的js代码在序数比例尺上无法使用：

- gipadm

---

这个例子展示了如何根据缩放调整x轴和y轴。 - FernOfTheAndes

这个例子参考了线性刻度。我正在使用序数刻度时遇到困难。 - gipadm

你不能将序数比例尺链接到缩放行为，因为缩放行为会尝试使用线性比例尺的[min，max]格式更改比例尺的域。有关刷选功能的问题，请参见此相关问题以获取解决方法，如果还有其他问题无法解决，请告诉我。 - AmeliaBR

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轴）翻译x轴。

编辑1：这里有一个带有clip-path的更新示例： http://jsfiddle.net/9rypxf10/

- kevinkl3

---

这真的很有帮助，谢谢分享！你如何剪辑数据，使域外的内容不会出现？我之前使用过另一个d3缩放示例，它使用了clip-path，但当svg元素被平移和缩放时似乎无效。 - dino

@dino 不客气，使用clip-path就可以实现，这里是更新后的示例：http://jsfiddle.net/9rypxf10/。 - kevinkl3