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/