Question

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

Answer 1

你以什么方式无法绘制折线图？您可以使用D3s的内置缩放功能让x轴成为数据的函数。有关详细指导，请参阅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);

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

1 个答案: