Question

我有一个值数组的数据，如下所示：

[244, 13, 24, 0, 18, 24, 3, 4, ... ]

虽然数组索引只是整数，但在这些数据中，它们代表一系列日期，使得第0个索引代表06/04/2013，最后一个索引代表09/30/2013，尽管它们实际上是在几秒钟内自1970年以来，1370378409和1380575923会更精确。

我希望我的x轴显示数组索引所代表的日期。因此，刻度看起来像日期：Mon 08，Tue 09等等。由于数据会发生变化，我无法提前知道什么是滴答声。我希望它们可以从我知道的端点计算出来。

理论上，我认为我可以从x轴的域（图表的宽度）转换为数组中表示的日期范围。像这样的东西（但这在这个公式中不起作用）：

var xAsTime = d3.time.scale()
                 .domain([0, width])
                 .range([startDate, endDate])

应该很好地从整数转换为日期。

Answer 1

x函数通常从您的数据域扩展到所需的范围，通常是图表的宽度。这就是你在许多例子中找到的东西。

通常要创建轴，您将传递给d3.svg.axis（）您的x函数。但是，x函数的主要工作通常是创建条形图的条形图。

我在这个条形图中使用的我自己的x函数：

var x = d3.scale.linear()
            .domain([0, data.length])
            .rangeRound([0, width]);

这是MBostock中的一个：

var x = d3.scale.ordinal()
            .rangeRoundBands([0, width], .1);

另一个JSFiddle：

var x = d3.time.scale()
            .domain([new Date(data[0].date),
                    d3.time.day.offset(new Date(data[data.length - 1].date), 1)])
            .rangeRound([0, width - margin.left - margin.right]);

使用d3标度的强大功能和简单性，我能够通过使用单独的x函数xAsTime从数组索引转换为日期来解决此问题，如下所示：

var xAsTime = d3.time.scale()
                  .domain([this.start * 1000, this.end * 1000])
                  .range([0, width])

var xAxis = d3.svg.axis()
                .scale(xAsTime)
                .tickSize(-height)
                .tickPadding(3);

根据我的问题，唯一的变化是切换域和范围。虽然我不确定细节，但似乎缩放的范围显示为刻度。

Answer 2

d3具有专门用于此目的的内置时间刻度：

https://github.com/mbostock/d3/wiki/Time-Scales

d3将x轴从数组索引转换为日期

2 个答案: