如何正确放大 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。