仅限 d3 缩放 x 域

Question

我目前有一个 d3 条形图，我试图将其缩放限制在它的 x 轴上。

数据沿 x 轴跨越了很多年，导致高度集中的条形图 graph. I'd like to be able to zoom along the x-axis, thus spreading the bars farther apart horizontally - similar to what is being done on this line graph here。

现在，我的 ember 应用程序中有一个功能，其中我 select SVG 中的每个元素并沿两个轴放大。如何限制缩放仅沿 x 轴发生？

启用缩放() {

const svg = d3.select('svg');

const zoomHandler = d3.zoom().scaleExtent([1, 2]).on('zoom', zoomed);

const bars = svg.selectAll('.bar'),
      lines = svg.selectAll('.line'),
      circles = svg.selectAll('circle');

zoomHandler(svg);

function zoomed() {

  lines.attr('transform', d3.event.transform);
  circles.attr('transform', d3.event.transform);
  bars.attr('transform', d3.event.transform);

}

},

Answer 1

在 v3 中可以做到：

const zoomHandler = d3.behavior.zoom()
  .x(x)
  .scaleExtent([1, 2])
  .on("zoom", zoomed);

在 v4 中，我们必须手动重新缩放我们的线性比例并使用重新缩放的版本来创建轴：

function zoomed() {
    const transform = d3.event.transform;

    // rescale the x linear scale so that we can draw the top axis
    const xNewScale = transform.rescaleX(xScale);
    xAxis.scale(xNewScale);
    gAxis.call(xAxis);

    // draw the lines, circles, bars in their new positions
    lines.attr('cx', function(d) { return transform.applyX(xScale(d)); });
    circles.attr('cx', function(d) { return transform.applyX(xScale(d)); });
    bars.attr('cx', function(d) { return transform.applyX(xScale(d)); });
}

结帐 this article 以获得良好的演练。

仅限 d3 缩放 x 域

d3 zoom x-domain only

javascript

d3.js

ember.js