如何正确缩放 d3 中的图表？

Question

我正在尝试向 d3 中的折线图添加缩放。

var zoom = d3.behavior.zoom()
   .x(xScale)
   .y(yScale)
   .scaleExtent([1, 10])
   .on("zoom", zoomed);
element.call(zoom);

function zoomed() {
   element.attr("transform", "scale(" + d3.event.scale + ")")
    .select(".x.d3-axis").attr('transform', 'translate(0,' + height + ')').call(xAxis)
     .select(".y.d3-axis").attr('transform', 'translate(0,0)').call(yAxis);
    };

jsFiddle

但是，每次缩放图表时，它都会向左移动。完成缩放操作后，我似乎无法找到将其恢复到原始位置的方法。

我该如何解决这个问题？

Answer 1

除了缩放元素之外，您还必须平移元素。现在，您的缩放功能是仅缩放element。

通过将转换更改为包含 d3.event.translate，您将获得所需的行为。

function zoomed() {
  element
  .attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")")

  ...
}

这是您的 fiddle 更新代码。

更新

要消除奇怪的偏移量，只需将边距添加到 d3.event.translate 值：

var translate = [d3.event.translate[0] + margin.left, d3.event.translate[1] + margin.top];

element
      .attr("transform", "translate(" + translate + ")scale(" + d3.event.scale + ")")

fiddle

此外，如果你想确保 SVG 只停留在原始边界内（没有溢出），你应该检查 SVG clipPath element.

如何正确缩放 d3 中的图表？

How to zoom a chart in d3 correctly?

javascript

plot

zooming

d3.js

更新