如何覆盖Dimple中时间轴的最小值/最大值

Question

我使用Dimple绘制数据，Y轴为日期，X轴为一天中的时间（0-23）。现在我希望Y轴的范围总是覆盖整个月，X轴的范围是覆盖一天中的整个24小时。

Dimple提供overrideMin和overrideMax，但对于时间轴，我不知道如何指定值：https://github.com/PMSI-AlignAlytics/dimple/wiki/dimple.axis#overrideMin

我在http://jsfiddle.net/mfhrpy6e/

var svg = dimple.newSvg("#chartContainer", 590, 400);
var data = [
    {'Date': '04-03-2013', 'Time': '13:05:01'},
    {'Date': '10-03-2013', 'Time': '12:45:52'},
    {'Date': '19-03-2013', 'Time': '05:08:21'},
    {'Date': '23-03-2013', 'Time': '21:55:01'},
];
var myChart = new dimple.chart(svg, data);
var x = myChart.addTimeAxis("x", "Time", "%H:%M:%S", "%H");
var y = myChart.addTimeAxis("y", "Date", "%d-%m-%Y", "%d-%m");
var s = myChart.addSeries(null, dimple.plot.bubble);
myChart.draw();

Answer 1

您可以使用d3为最大值和最小值创建日期对象：

x.overrideMin = d3.time.format("%H:%M:%S").parse("00:00:00");
x.overrideMax = d3.time.format("%H:%M:%S").parse("23:59:59");

只有当你想从00:00:00到00:00:00时，才需要引入日期，否则系统无法区分它们。

以下是简化答案的小提琴：

http://jsfiddle.net/mfhrpy6e/6/

Answer 2

http://dimplejs.org/advanced_examples_viewer.html?id=advanced_time_axis做到了，但使用了一种巧妙的变通方法。

Dimple希望这里的最小值/最大值是D3的日期格式。似乎没有附带的时间格式/对象。示例中的解决方法是将所有时间放在2000年1月1日的同一日期，然后指定该日期的最短时间和最长时间。

首先将日期添加到每次：

data.forEach(function (d) {
    d["Time"] = "2000-01-01 " + d["Time"];
}, this);

然后指定最小值/最大值：

// 2000-01-01 does not work here, no idea
x.overrideMin = new Date("01/01/2000 00:00:00");
x.overrideMax = new Date("01/01/2000 23:59:59");

这是最新的小提琴：http://jsfiddle.net/mfhrpy6e/5/

这真的不是一个令人满意但相当丑陋的解决方案，所以我不会接受它作为我自己问题的答案。