从时间戳数组创建D3条形图

Question

我正在寻找有关最佳做法/如何开始的一些见解。我有一个json对象，给定日期有1000个时间戳。我想建立一个24小时时间框架的x轴，勾选4小时...上午12点 - 凌晨4点，早上4点 - 早上8点等。然后我想根据音量建立y轴。因此，将根据该时段中的时间戳数填充4小时时段的每个条形。我的json看起来像这样（除了有更多的条目）：

[
{"Time":"2017-02-07 16:14:06"},
{"Time":"2017-02-07 16:58:49"},
{"Time":"2017-02-07 17:07:11"},
{"Time":"2017-02-07 18:13:19"},
{"Time":"2017-02-07 13:56:06"},
{"Time":"2017-02-07 19:07:57"},
{"Time":"2017-02-07 12:08:58"},
{"Time":"2017-02-07 01:41:00"},
{"Time":"2017-02-07 11:56:49"},
{"Time":"2017-02-07 02:45:29"}
]

我一直在读D3，特别是如何使用内置的'time'方法，但我希望能得到一些关于如何开始的指示。我想要的最终结果看起来像这里附带的图像（忽略黑条，因为那些将来自另一个来源）。任何帮助/指针都非常感谢。

Answer 1

这不是一个纯粹的D3解决方案，但我要做的是解析该JSON对象，然后创建一个新的，具有每个时间间隔的总计数，然后将其输入到d3图中。

不确定你还试过什么，但这应该让你走上正确的道路。

https://jsfiddle.net/9f2vp8gp/

var margin = {
    top: 20,
    right: 20,
    bottom: 70,
    left: 40
  },
  width = 600 - margin.left - margin.right,
  height = 300 - margin.top - margin.bottom;

// Parse the date / time
var parseDate = d3.time.format("%m").parse;

var x = d3.scale.ordinal().rangeRoundBands([0, width], .05);

var y = d3.scale.linear().range([height, 0]);

var xAxis = d3.svg.axis()
  .scale(x)
  .orient("bottom")
  .tickFormat(d3.time.format("%m"));

var yAxis = d3.svg.axis()
  .scale(y)
  .orient("left")
  .ticks(10);

var svg = d3.select("body").append("svg")
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom)
  .append("g")
  .attr("transform",
    "translate(" + margin.left + "," + margin.top + ")");

var data = [{
  "date": "1",
  "value": 44
}, {
  "date": "2",
  "value": 24
} ,{
  "date": "3",
  "value": 31
},{
  "date": "4",
  "value": 38
},{
  "date": "5",
  "value": 46
},{
  "date": "6",
  "value": 23
}];

data.forEach(function(d) {
  d.date = parseDate(d.date);
  d.value = +d.value;
});

x.domain(data.map(function(d) {
  return d.date;
}));
y.domain([0, d3.max(data, function(d) {
  return d.value;
})]);

svg.append("g")
  .attr("class", "x axis")
  .attr("transform", "translate(0," + height + ")")
  .call(xAxis)
  .selectAll("text")
  .style("text-anchor", "end")
  .attr("dx", "-.8em")
  .attr("dy", "-.55em")
  .attr("transform", "rotate(-90)");

svg.append("g")
  .attr("class", "y axis")
  .call(yAxis)
  .append("text")
  .attr("transform", "rotate(-90)")
  .attr("y", 6)
  .attr("dy", ".71em")
  .style("text-anchor", "end")
  .text("Value ($)");

svg.selectAll("bar")
  .data(data)
  .enter().append("rect")
  .style("fill", "steelblue")
  .attr("x", function(d) {
    return x(d.date);
  })
  .attr("width", x.rangeBand())
  .attr("y", function(d) {
    return y(d.value);
  })
  .attr("height", function(d) {
    return height - y(d.value);
  });