Javascript D3.js v4仅水平平移（无缩放）

我是D3.js新手，正在尝试构建一个非常宽的折线图，水平平移以显示.csv文件中的更多数据。对于最新版本的D3，我还没有找到很多好的资源

我正在努力实现的目标：

• 图表用隐藏的溢出填充屏幕
• 拖动/鼠标滚轮可从右侧显示更多数据
• 轴标签保持不变（但x轴会更改以反映新数据）
• 禁止缩放

我现在的代码呈现图表，可以点击和拖动，但整个过程只是从屏幕上移开。。。代码如下：

var margin = {top: 50, right: 50, bottom: 50, left: 50},
  width = window.innerWidth - margin.left - margin.right,
  height = window.innerHeight - margin.top - margin.bottom;

var x = d3.scaleLinear().range([0, width]);
var y = d3.scaleLinear().range([height, 0]);

var line = d3.line()
  .x(function(d) { return x(d.mile); })
  .y(function(d) { return y(d.elevation); })

var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .call(d3.zoom().on("zoom", function () {
      svg.attr("transform", d3.event.transform)
    }))
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

function draw(data) {
  data.forEach(function(d) {
    d.mile = +d.mile;
    d.elevation = +d.elevation;
  });

  x.domain(d3.extent(data, function(d) { return d.mile }) )
  y.domain([0, d3.max(data, function(d) {
    return Math.max(d.elevation) }) ]);

  svg.append("path")
    .data([data])
    .attr("class", "line")
    .attr("d", line)

  svg.append("g")
    .attr("transform", "translate(0," + height + ")")
    .call(d3.axisBottom(x));

  svg.append("g")
    .call(d3.axisLeft(y));

}

d3.json("data.json", function(error, data) {
  if (error) throw error;

  draw(data)
});

下面是数据的示例：

mile,elevation
1505.9,1800
1506.4,1360
1507.0,1340
1507.9,1750
1509.7,2365

提前感谢任何人能提供我帮助解决这个问题的资源