使用Dimple.js添加timeAxis

Question

我有以下dimple.js代码：

var svg = dimple.newSvg("#chart_montreal", 590, 400);
d3.csv("data/data_montreal.csv", function (data) {
data = dimple.filterData(data, "parameter", ["DCE_1_2","DCE_1_3","DCE_1_4"])
     var myChart = new dimple.chart(svg, data);
     myChart.setBounds(60, 30, 505, 305);
     var x = myChart.addTimeAxis("x", "date","%m-%d-%Y-%H%M%S","%m-%d-%y-%H%M%S");//  09-11-2007 15:15 "%m/%d/%y_%X","%m/%d/%y %X"
     console.log(x);
     //x.addOrderRule("date");
     myChart.addMeasureAxis("y", "values");
     myChart.addSeries("parameter", dimple.plot.area);
     myChart.addLegend(60, 10, 500, 20, "right");
     //myChart.setMargins("0%","0%","0%","30%");
     myChart.draw();
});

console.log（x）返回一个对象; 在Chrome的检查器中，我可以读取x的值为：

_max：2007年9月24日星期一12:00:00 GMT-0500（中部夏令时） 原型 ：无效日期

_min：Tue Sep 11 2007 15:15:00 GMT-0500（Central Daylight Time） proto ：无效的日期

csv示例：

参数，日期，数值，样品，

苯，09-11-2007-151500,150，PO1-1-110907，

氯苯，09-11-2007-151500,1900，PO1-1-110907，

DCE_1_2,09-11-2007-151500,5500，PO1-1-110907，

DCE_1_3,09-11-2007-151500,1000，PO1-1-110907，

DCE_1_4,09-11-2007-151500,3000，PO1-1-110907，

乙苯，09-11-2007-151500,100，PO1-1-110907，

因此，日期正确显示，时间被完全删除。

我认为这是一个错误，因为没有报告错误。

工作文件在这里： http ： //lorefolk.com/ii/iveysoldemo/demo.html#/5

有没有人看到格式化有什么问题或知道d3中的技巧来解决这个问题？

Answer 1

这不是一个错误，凹坑中的时间轴显示定期间隔而不是有数据的点。 这里的间隔是每天，这意味着每天午夜标记。 您可以使用axis.timePeriod和axis.timeInterval的组合来更改间隔。 因此，如果您想每隔4小时绘制一个标签x轴，它看起来像：

var svg = dimple.newSvg("#chart_montreal", 590, 400);
d3.csv("data/data_montreal.csv", function (data) {
    data = dimple.filterData(data, "parameter", ["DCE_1_2","DCE_1_3","DCE_1_4"])
    var myChart = new dimple.chart(svg, data);
    myChart.setBounds(60, 30, 505, 305);
    var x = myChart.addTimeAxis("x", "date","%m-%d-%Y-%H%M%S","%m-%d-%y-%H%M%S");
    x.timePeriod = d3.time.hours;
    x.timeInterval = 4;
    myChart.addMeasureAxis("y", "values");
    myChart.addSeries("parameter", dimple.plot.area);
    myChart.addLegend(60, 10, 500, 20, "right");
    myChart.draw();
});

您可以在工具提示中查看点的实际值，在您的情况下需要单击相关数据点。 您还会从下拉线注意到它们不一定与轴点对齐。 NB如果要使数据点更容易找到，请使用series.lineMarkers = true 。

如果你想要每个数据点的x值，你需要使用类别轴而不是时间，但是无论它们之间的时间如何，这都将均匀地分隔点，因此可能不适合您的数据。