Question

我有一个功能图https://jsfiddle.net/lucksp/crwb4v5u/，它创建了带有ordinal()的xScale，因为我的x轴小时没有使用日期对象，只有15分钟间隔的字符串24小时：{ {1}}。我想要为条形图和工具提供一个工具提示。区域一次使用鼠标后面的垂直线，因为有2组数据使用2种不同的图表类型。与https://jsfiddle.net/ringstaff/dL1qp1t6/或http://bl.ocks.org/asielen/44ffca2877d0132572cb或http://bl.ocks.org/WillTurman/4631136

类似

为了做到这一点，必须['0:00', '0:15', '0:30', '0:45', '1:00', ..... '14:00'... '23:45', '24:00']将转换像素坐标转换为序数数据范围。但是，序数标度不允许反转。所以这样做的方法是使用invert。

我试图通过以下示例来模拟这种比例的使用：

http://jsfiddle.net/hpjqt1dL/4 这提供了一个很好的日期对象，但它收到的字符串上的d3解析格式错误。

日期对象示例：

time.scale()

http://bl.ocks.org/anupsavvy/9513382（点击蓝色按钮选择显示小时间隔的日期）

我喜欢这个，因为它也使用字符串＆＃34; time＆＃34;但我并不喜欢域名的设置方式：

var today = new Date();
today.setHours(0, 0, 0, 0);
todayMillis = today.getTime();

data.forEach(function(d) {
    var parts = d.time.split(/:/);
    var timePeriodMillis = (parseInt(parts[0], 10) * 60 * 60 * 1000) +
                           (parseInt(parts[1], 10) * 60 * 1000) + 
                           (parseInt(parts[2], 10) * 1000);

    d.time = new Date();
    d.time.setTime(todayMillis + timePeriodMillis);
});

日期解析：http://jsfiddle.net/aWJtJ/8/

但是，我在面积图表或xScale.domain([new Date(0, 0, 0,dataset[0][0].time,0, 0, 0),new Date(0, 0, 0,dataset[0][dataset[0].length-1].time,0, 0, 0)])或者轴未呈现时出错。

.attr('width', xScale.rangeBand())

所以在这一点上，我不确定是什么导致了这些问题。由于这是我第一次深入研究d3，我希望有关如何从序数转换为时间的其他解释。

将xScale从序数转换为时间

0 个答案: