d3.js - 如何使用 d3.js 更改折线图中轴的比例？

Question

我想在折线图中更改 X 轴的比例，以便一次显示 20,000 个或更多值。请帮我解决一下这个。我的折线图有两列（ID 和 TIME）。ID 值是 1、2、3 等等，直到 20132。TIME 值从 0 到 525 不等。我无法用这些值绘制折线图。你能帮我改变轴的比例吗？

Answer 1

什么方式无法绘制折线图？您可能希望使用 D3s 的内置比例函数让 x 轴成为数据的函数。有关更多指南，请参阅本教程。

编辑：

因此，假设您有一些数据存储在变量 中data。首先，您需要一个重新计算每个数据值以适合您的 SVG 容器的比例。例如：

var x = d3.scale.linear()
    .domain([0, d3.max(data, function (d) { return d.id; })]) //Convert the id-values...
    .range([0, 960]); //...to a range from 0 to 960.

下一步是构建一个轴，该轴从刻度范围内获取数据，如下所示：

var xAxis = d3.svg.axis().scale(x);

最后一步（好吧，除了之后的一些强制性样式）步骤是将轴链接到您的 SVG 容器。假设您命名了 container svg。然后：

svg.append('g')
  .attr("class", "axis")
  .call(xAxis);