d3.js：有序缩放和缩放/平移

问题描述

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

I have a basic D3 bar chart with ordinal x-scale and linear y-scale.

我添加了缩放功能，

如何让x-scale根据缩放级别进行相应调整？

How can I get the x- scale to adjust accordingly with the zoom level?

现在的样子：

下面的js不能用顺序量表：

The js below doesn't work with ordinal scales:

d3.behavior.zoom（）
。

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

推荐答案

b
$ b

This is the way to do it:

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);
}

只需在X中翻译和缩放栏，而不是X和Y， xAxis与d3.event.translate [0]（x轴）。

Just translate and scale the bars in X not x and y, also translate the xAxis with the d3.event.translate[0] (x axis).

编辑1：
这里是更新示例 clip-path ：


这篇关于d3.js：有序缩放和缩放/平移的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！