D3线条图,可以'不能编辑刻度与序数刻度的数量

D3 linechart, can't edit the amount of ticks with an ordinal scale?

本文关键字:编辑 序数 不能 可以 D3      更新时间:2023-09-26

我之前问过一个关于d3的问题,他们建议我使用一个序数刻度,这样可以解决我的问题。它确实解决了我的问题,但我知道我被另一个问题困住了…

它画得很好,但是我的x轴满是文字。举个例子,我想:1900 1904 1908 1912…但我得到了:190119021903190419051906. 正如你所看到的,这不是很清楚。(这只是一个例子,如果只有日期,我可以使用另一种刻度)。我看到的每一个地方都在谈论axis.ticks(数字)。但这行不通。什么都没发生,我还是得到了同样的结果。我黑了一个结果,在x轴上得到更少的结果:

  var str = [];
  var i = 0;
  while(i < data.length) {
      str.push(data[i].age);
      i=i+8;
  }
  x.domain(str);

但是如果我这样做,它会创建一条随机的线,并且不再完美地绘制它。不知道如何解决这个问题…这是一个简单的折线图,没什么难的,唯一的困难(对我来说)是序数刻度…

希望有人能帮帮我。

x轴和x轴是这样定义的:

var x = d3.scale.ordinal()
    .rangeRoundBands([0, width-150],1);
var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom")

没有while-loop(讨厌的hack),我只用下面这行定义x.domain:

x.domain(data.map(function(d) { return d.age; }));

查看轴的文档,特别是ticks()函数。您可以使用它(或tickValues())来控制要显示的值的数量(和内容)。

如果您正在处理日期,您可能希望使用时间刻度而不是序数刻度。特别是,它将允许您以更有意义的方式控制刻度,例如指定您每五年需要一次刻度。