與Dimple.js

Question

添加timeAxis

我有以下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：週二2007年9月11日15:15:00 GMT-0500（中部夏令時間） 原：無效的日期

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

這不是一個bug，dimple中的時間軸顯示的是定期的時間間隔，而不是有數據的點。這裏的時間間隔是每天，這意味着每天的午夜都會被貼上標籤。您可以使用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(); 
}); 

你可以看到工具提示中的點，這在你的情況下，需要對相關數據點產生點擊的實際值。你還會注意到從下拉線他們不一定與軸點對齊。 N.B如果您想使數據點更容易找到，請使用series.lineMarkers = true。

如果你想要每個數據點的x值，你需要使用一個類別軸而不是時間，但是它將均勻地分隔點，而不管它們之間的時間，所以可能不適合你的數據。