从 1 而不是 0 (D3.js) 开始线性刻度答案

【问题标题】：Starting linear scale from 1 instead of 0 (D3.js)从 1 而不是 0 (D3.js) 开始线性刻度
【发布时间】：2014-08-26 14:40:49
【问题描述】：

我正在尝试使用 D3.js 创建一个折线图，并且我希望我的 X 轴从 1 而不是 0 开始。代码如下：

    var temp = [36.5, 37.2, 37.8, 38.2, 36.8, 36.5, 37.3, 38.2, 38.3, 37];

    var x = d3.scale.linear().domain([0,temp.length]).range([0, w]);
    var xAxis = d3.svg.axis().scale(x).tickSize(-h).tickSubdivide(false);

        graph.append("svg:g")
              .attr("class", "x axis")
              .attr("transform", "translate(0," + h + ")")
              .call(xAxis);

当我将其更改为：

    var x = d3.scale.linear().domain([1,temp.length]).range([0, w]);

已编辑比例尺，但图表从图表本身之外开始。我尝试使用刻度值，但我无法让它工作。

如何让我的体重秤从 1 开始？

【问题讨论】：

“图表开始于图表本身之外”是什么意思？您如何设置数据点的 x 位置？

标签： javascript d3.js graph

【解决方案1】：

我假设您使用数据索引来标记轴。

当您从 1 开始设置域时，您实际上只是在告诉您的图表使图表的最左侧部分成为 second 基准（索引 1）的 x 坐标.

当您实际创建图表时，有一个数据（索引 0，值 36.5）在您定义的域之外，并且 d3 使用线性外推法来确定应该放置的位置，使其最终位于图表的开始。

您真正想要做的是从 0 开始您的域，以便第一个数据在您的域中，但要重新格式化您的刻度标签，以便它们显示以 1 为增量的索引。

您可以使用axis.tickFormat() 来执行此操作。

var xAxis = d3.svg.axis()
  .scale(x)
  .tickSize(-h)
  .tickFormat(function(d) { return d + 1; })

旁注：您不应指定.tickSubdivide(false)，因为：

该函数需要一个数字，而不是布尔值，false 将被强制转换为 0。
默认值为0。
axis.tickSubdivide 已弃用，自 3.3.0 版起不再执行任何操作

【讨论】：