Question

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

提前感谢任何人可以帮我解决此问题的任何资源！

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

0 个答案: