Question

如何在D3中进行对数日期时间刻度？

一个简单的时间尺度是这样的：

d3.time.scale()
.domain([new Date(2014, 0, 1), new Date()])
.range([0, 500])

和简单的对数比例如下：

d3.scale.log()
.domain([new Date(2014, 0, 1), new Date()])
.rangeRound([0, 500])
.base(10)

试图以各种方式链接他们的语法而没有效果。

图表将按上次登录日期定位用户。范围大约是一年。如果我们线性地分配数据，大多数用户将在最后几天/几小时内发生碰撞。使用对数，我们可以缩放最后几个小时。

解决方案可以通过交互式缩放或多个图表进行。但这里的目标是制作具有年度非线性概览的单一静态图表。

一种替代方法是将日期时间转换为“从现在开始的天数”，一个数字。它适用于数据。但后来我不知道如何标记轴刻度，如“01-01-2014”...

Answer 1

创建两个刻度并一个接一个地使用。首先使用时间刻度而不是对数或比例尺。

var parseDate = d3.time.format("%Y-%m-%d").parse;

var x = d3.time.scale()
    .range([0,width]);

var xLog = d3.scale.pow().exponent(4)
    .domain([1,width])
    .range([0,width]);

我使用.forEach来获取线性点：

x.domain(d3.extent(data, function(d) { return parseDate(d.start); }));

  data.forEach(function(d) {
    d.start = x(parseDate(d.start));
  });

当我绘制对象时，我添加了对数比例：

.attr('cx', function (d) { return xLog(d.start)})

Answer 2

像下面的东西似乎愚弄d3js认为它有一个真正的比例对象。它应该是一个很好的起点：

var xt = d3.scaleUtc()
    .domain([start, now])
    .range([1, width])
var xp = d3.scalePow()
    .exponent(2)
    .domain([1, width])
    .range([0, width])

// Fool d3js into thinking that it is looking at a scale object.
function x_copy() {
    var x = function(t) { return xp(xt(t)) }
    x.domain = xt.domain
    x.range = xp.range
    x.copy = x_copy
    x.tickFormat = xt.tickFormat
    x.ticks = xt.ticks
    return x
}
x = x_copy()

var xAxis = d3.axisBottom(x)

对数时标

2 个答案: