Question

我试图用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]);

编辑了比例，但图表在图表本身之外开始。我试图使用tickvalues，但我无法使用它。

如何让我的比例从1开始？

Answer 1

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

当您将域名设置为1时，您实际上只是告诉您的图表使图表的最左侧部分成为第二个基准的x坐标（索引） 1）。

当您实际创建图表时，有一个基准（索引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版本起无效。

从1开始线性比例而不是0（D3.js）

1 个答案: