d3.js網格在拖動和縮放時左右移動

Question

我試圖複製顯示網格的行爲here。

我的代碼是here

問題是，當我拖動或縮放，網格與其他內容一起移動，同時它不應該。

我懷疑問題是解決此部分：

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); 
     } 

然而，在this的情況下，我的可視化（行）不再移動：

如何讓我的線條和網格以正確的方式移動？

Answer 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 + ")"); 
      }