用JSON数据在d3中绘制频率图

Question

我正在做一个项目在d3和我在我的智慧'结束如何绘制频率图的推文。这里有一个JSON文件格式如下

<>之前｛"text": "some text here";"time": "这里的时间戳"，"timezone": "这里的时区"，"retweet_count":某个数字，"标签":"这里有些文字"}之前

所以，现在我需要在d3中绘制一个图表，显示特定时间段内tweet的数量。例如，在日期X和日期Y之间，该图显示了每天有多少条推文。

有人能帮我一下吗?我对d3真的很陌生。

Answer 1

您应该能够使用d3时间尺度和间隔来为您进行分组。比如:

var data= [
  {time: 'Jan. 1, 2012 13:00', name:"test", value:2},
  {time: 'Jan. 2, 2012 9:00', name:"test", value:2},
  {time: 'Jan. 3, 2012 14:00', name:"test", value:2},
  {time: 'Jan. 1, 2012 12:30', name:"test", value:2},
  {time: 'Jan. 3, 2012 1:00', name:"test", value:2},
  {time: 'Jan. 3, 2012 1:10', name:"test", value:2},
  {time: 'Jan. 3, 2012 1:20', name:"test", value:2},
  {time: 'Jan. 3, 2012 2:00', name:"test", value:2},
  {time: 'Jan. 1, 2012 3:00', name:"test", value:2},
];
// Get the date range from the data - could also be hardcoded
var dateRange = d3.extent(data, function(d) { return new Date(d.time); });
console.log("Data range", dateRange); // This will output your data's time range
// This will compute time bins
var binner = d3.time.scale();
// Pick the interval I want to bin on
var interval = d3.time.day; // Use hour, or minute, etc.      
// I will compute the number of the time intervals I want  
var allIntervals = interval.range(interval.floor(dateRange[0]), interval.ceil(dateRange[1]));
console.log("Intervals", allIntervals); // This will output an array of all the days/hours/whatever between min and max date
// Input domain mapped to output range
binner.domain([allIntervals[0], allIntervals[allIntervals.length - 1]]);
binner.range([0,allIntervals.length - 1]);
// Make sure we only output integers - important because we will fill an array
binner.interpolate(d3.interpolateRound);
// Empty histogram
var hist = [];
for(var i=0; i < allIntervals.length; i++) hist[i] = 0;
data.forEach(function(d) {
  // Compute the hour index
  var tid = binner(interval.floor(new Date(d.time)));
  console.log("Map " + d.time + " to " + tid);
  if(!hist[tid]) {
    hist[tid] = 1;
  } 
  else { 
    hist[tid]++;
  }
});
// Here is the histogram.
console.log("Hist:",hist);

我把它和一个非常基本的直方图放在一起

请注意，您可能可以用一些毫秒数学来代替interval.range(…)调用来提高性能，但是如果您想要做，例如，工具提示，那么拥有所有的值可能是有用的。