javascript - 如何正确缩放 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

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

通过更改转换以包含 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 .