Question

var xAxis = d3.svg.axis()
      .scale(timeScale)
      .orient('bottom')
      .ticks(d3.time.millisecond, 100)
      .tickSize(-h + theTopPad + 20, 0, 0)
      .tickFormat(d3.time.format('%S:%L'));

我的数据范围是0-3000ms。上面的代码显示为00：100,00：200,00：300;这是非常混乱的，因为大多数预期数据将低于1000毫秒我正在寻找类似'100,200，...... 900,1000,1100'的东西，即没有重叠'秒' 如果那是不可能的，那么下一个最好的选择是“0：100,0：200,0：300 ...... 1：100”，即没有'秒的前导零。
这有可能吗？
更重要的是，蜱的间距似乎坚持到'100ms'。如果我将其更改为.ticks(d3.time.millisecond, 50)或其他任何内容，则无效。错误？

第一个

var tickformatter = d3.format("f")

.tickFormat(function(d) { return  tickformatter(d) + "ms"; });

FIDDLE： http://jsfiddle.net/Q5Jag/613/

Answer 1

您不需要使用d3.time.format。

在小提琴中，替换

d3.time.format('%Lms')

与

function(d) { return d.getTime()+"ms"; }

由于没有d3.time.millisecond，你的刻度被卡住了100毫秒，因此它回落到默认值：10刻度。您可以使用时间刻度范围的差异并将其除以50，这是您希望直接传递到axis.ticks()的刻度数。

Answer 2

在您的代码中替换以下代码

var xAxis = d3.svg.axis()
      .scale(timeScale)
      .orient('bottom')
      .ticks(d3.time.millisecond, 50)
      .tickSize(-h + theTopPad + 20, 0, 0)
    .tickFormat(d3.time.format('%S:%L'));

而不是

var xAxis = d3.svg.axis()
      .scale(timeScale)
      .orient('bottom')
      .ticks(d3.time.millisecond, 50)
      .tickSize(-h + theTopPad + 20, 0, 0)
      .tickFormat(d3.time.format('%Lms'));

D3毫秒刻度间隔问题

2 个答案: