Question

我试图以小时为单位显示5天的多线温度图表。我能够创建两个轴，但我在显示线条时遇到问题。我有一个像这样的JSON，其中x是每3小时一个日期对象，y是温度。

var dataset = [
//day 1
[
{x: Date 2015-09-07T21:00:00.000Z, y: 30.75},
{x: Date 2015-09-08T00:00:00.000Z, y: 29.32},
{x: Date 2015-09-08T03:00:00.000Z, y: 25.67},
{x: Date 2015-09-08T06:00:00.000Z, y: 22.7}
],
//day 2
[
{x: Date 2015-09-08T09:00:00.000Z, y: 23.69},
{x: Date 2015-09-08T12:00:00.000Z, y: 24.18},
{x: Date 2015-09-08T15:00:00.000Z, y: 26.69},
{x: Date 2015-09-08T18:00:00.000Z, y: 22.36},
{x: Date 2015-09-08T21:00:00.000Z, y: 23.91},
{x: Date 2015-09-09T00:00:00.000Z, y: 22.98}
],
//day 3
Array[8],
//day 4
Array[8],
//day 5
Array[8]
]

在初始化图形时，如下所示，而不是多线图，我得到一行包含所有4天。

var chart = lineChart("graph")
        .x(d3.time.scale().domain([
            dataset[0][0].x, dataset[3][7].x
        ]))
        .y(d3.scale.linear().domain([min, max]));
dataset.forEach(function (series) {
    chart.addSeries(series);
});

chart.render();

如果我将域名更改为，

dataset[4][0].x, dataset[4][7].x

它只绘制当天的行。

奇怪的是，当我通过浏览器“检查Elemet”时，我可以看到所有5条路径都已被抽出，但它们只是没有出现在UI上。我认为这与我设置域名的方式有关，但我不确定是什么。

如何设置域以便d3js在24小时x轴上绘制每天的数组？

Answer 1

如果我理解正确，你想要从午夜到午夜都有x轴，好像一切都发生在一天＆＃34;就像这样：

注意：源中的时间戳有些奇怪。我不知道dt_text和domain是如何相关的。请相应调整我的示例......

你怎么能得到它？

代码中的问题确实与.domain([ dataset[0][0].x, dataset[3][7].x ])有关。怎么样？

如果您将域设置为从第一个时间戳到最后一个时间戳，例如：

function gDate2(date) {
  var now = new Date();
  var hours = (new Date(date * 1000)).getHours();
  var date = now.getDate();
  var month = now.getMonth();
  var d = new Date(2015, month, date, hours, 0, 0, 0);
  return d;
}

那么图表将跨越4天（顺便说一句：这些硬编码的索引不是非常强大的编码......）

因此，图表显然会在所有日子里进行绘图，它无法知道您只需要每小时的时间戳。

另一方面，如果您将最近一天用作域名：

。域（[ dataset [3] [0] .x，dataset [3] [7] .x ]））

它将只绘制那个，即最后一天。其他线也将被绘制（您在检查器中看到的内容），但是它将隐藏在左侧（当您剪切内容时）。

所以：问题是，x坐标不同，因为它们出现在不同的日期。有很多方法可以解决这个问题（我个人总是使用moment.js作为日期），但为了显示效果，这里有一个快速破解以实现上图：

-> JSFiddle

我做了什么？我添加了一个新的辅助函数来计算x时间戳：

dt

是的，它不漂亮。就个人而言，我喜欢moment.js来计算日期和内容。重要的是，我将所有日期归还，就像今天（或任何其他任意日期）一样。然后我提取相应数据点的时间戳的小时并添加（如在注释中：也许你需要几分钟，几秒钟？）

如果您打算使用它，请确保您的时区，日光节约等受到控制！我讨厌约会......）

再次：我不确定dt_text和{{1}}。确保你做对了！

我希望这会有所帮助。

无法在d3js中显示来自多维数组的每小时数据

1 个答案: