Question

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

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

如何使缩放级别相应地调整x刻度？

下面的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/

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

1 个答案: