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中的图表？

1 个答案:

更新