D3.jsv4仅水平平移(无缩放)

我是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

提前感谢任何人都可以帮我解决这个问题的资源!