Question

我有很多天的15分钟数据来自许多传感器。我从.csv文件导入了数据，并根据传感器ID和日期将其存储在嵌套的Map中。

Map(3) {
  "10D1012B" => Map(30) {
    "1/1/2019" => Array(1)
    "1/2/2019" => Array(1)
            ...
    "1/30/2019" => Array(1)
  }
  "10D1028B" => Map(30) {
    "1/1/2019" => Array(1)
    "1/2/2019" => Array(1)
            ...
    "1/30/2019" => Array(1)
  }
  "10D1044B" => Map(30) {
    "1/1/2019" => Array(1)
    "1/2/2019" => Array(1)
            ...
    "1/30/2019" => Array(1)
  }
}

每个数组包含该日期的15分钟数据。

[
  {
    "00:15": "0.48",
    "00:30": "0.6",
    "00:45": "0.896",
    "01:00": "0.712",
    "01:15": "1.12",
          ...
    "23:00": "0.48",
    "23:15": "0.6",
    "23:30": "0.624",
    "23:45": "0.552",
    "00:00": "0.704"
  }
]

这似乎是我数据的最合理的结构，但我愿意接受以不同方式构造数据的建议，如果这样可以简化制图的话。

我正在尝试为单个传感器制作一天的柱形图。我可以使用Map.get("10D1012B").get("1/1/2019")来获取包含15分钟数据对象的数组。

var xScale = d3.scaleLinear().domain().range([0,600]);
var yScale = d3.scaleLinear().domain([0,3.0]).range([0,600]);

var xAxis = d3.axisBottom().scale(xScale);
var yAxis = d3.axisLeft().scale(yScale);

d3.select("svg").append("g").attr("id", "xAxisG").call(xAxis);
d3.select("svg").append("g").attr("id", "yAxisG").call(yAxis);  

d3.select("svg").selectAll("rect")
    .data(sensorMap.get("10D1012B").get("1/1/2019"))
    .enter()
    .append("rect")
    .attr("width", 5)
    .attr("height", )
    .attr("x", )
    .attr("y", )
    .style("fill", "#7AFF33");

我不确定迭代数组，为每个对象（数据点）绘制一列然后沿x轴平移到下一个点的最简单方法。

此外，处理x轴刻度的最佳方法是什么，如果我每三个小时要标签（即“ 3:00”，“ 6:00”，“ 9:00”等），< / p>

对象数组中的D3.js柱形图

0 个答案: