Question

我目前有一个d3条形图，我试图将缩放限制为只有x轴。

数据沿x轴跨越很多年，导致高度集中的条graph。我希望能够沿着x轴进行缩放，从而使条形水平分开 - 类似于此线图here上的内容。

现在，我在我的ember应用程序中有一个函数，我在其中选择SVG中的每个元素并沿两个轴放大。如何限制仅沿x轴进行缩放？

enableZoom（）{

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

在第3版中，可以这样做：

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

在第4版中，我们必须手动重新调整线性刻度并使用重新缩放版本来创建轴：

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-domain

1 个答案: