1

我正在 d3 中做一个项目，对于如何绘制频率图来绘制推文，我束手无策。所以，基本上，我有一个 JSON 文件，它的格式是这样的

{
    "text": "这里有一些文字",
    "time": "这里的时间戳",
    "timezone": "这里的时区",
    “retweet_count”：一些数字，
    “hashtags”：“这里有一些文字”
}

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

有人可以帮我解决这个问题吗？我对d3真的很陌生。

4

1 回答 1

3

您应该能够使用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(...) 调用来提高性能，但是如果您想做工具提示，那么拥有所有值可能会很有用。

于 2013-01-07T22:54:14.940 回答