1

我试图复制此处显示的网格的行为。

我的代码在这里

问题是,当我拖动或缩放时,网格与其他所有内容一起移动,而它不应该。

我怀疑问题出在这部分:

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

事实上,当我删除最后一行时,网格工作正常(或多或少)

function zoomed() {
          svg.select(".x.axis").call(xAxis);
          svg.select(".y.axis").call(yAxis);
        }

但是,在这种情况下,我的可视化(线条)不再移动:

如何使我的线条和网格以正确的方式移动?

4

1 回答 1

1

我已经更正了你的代码

这里的工作示例:http: //jsfiddle.net/cyril123/p4cmx1kj/3/

您还需要在缩放时与轴一起更新线条。

function zoomed() {
              svg.select(".x.axis").call(xAxis);
              svg.select(".y.axis").call(yAxis);
              lines.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
            }
于 2015-06-17T05:32:21.587 回答