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

Question

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

Answer 1

以何种方式无法绘制折线图？你会想让x轴成为你数据的函数，使用D3s内置的比例函数。有关更多指导，请参阅this tutorial。

编辑：

所以，让我们说你有存储在变量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容器。假设您将容器命名为svg。然后：

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