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

我正在d3做一个项目，我对如何绘制一个频率图来绘制tweet感到束手无策。基本上，我有一个JSON文件，其格式如下

{ "text": "some text here", "time": "timestamp here", "timezone": "timezone here", "retweet_count": some number, "hashtags": "some text here" } { “文本”：“此处有一些文本”， “时间”：“此处的时间戳”， “时区”：“此处时区”， “转发计数”：一些数字， “hashtags”：“此处有一些文本” } 所以，现在我需要在d3中绘制一个图表，显示特定时间段内的tweet数量。例如，在日期X和日期Y之间，图表显示每天有多少条推文

---

有人能帮我解决这个问题吗？我对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);

var数据=[
{时间：'2012年1月1日13:00'，名称：'test'，值：2}，
{时间：'2012年1月2日9:00'，名称：'test'，值：2}，
{时间：'2012年1月3日14:00'，名称：'test'，值：2}，
{时间：'2012年1月1日12:30'，名称：'test'，值：2}，
{时间：'2012年1月3日1:00'，名称：'test'，值：2}，
{时间：'2012年1月3日1:10'，名称：'test'，值：2}，
{时间：'2012年1月3日1:20'，名称：'test'，值：2}，
{时间：'2012年1月3日2:00'，名称：'test'，值：2}，
{时间：'2012年1月1日3:00'，名称：'test'，值：2}，
];
//从数据中获取日期范围-也可以硬编码
var dateRange=d3.extent（数据，函数（d）{返回新日期（d.time）；}）；
console.log（“数据范围”，日期范围）；//这将输出数据的时间范围
//这将计算时间箱
var binner=d3.time.scale（）；
//选择我想要的时间间隔
var间隔=d3.time.day；//使用小时、分钟等。
//我将计算我想要的时间间隔数
var allIntervals=interval.range（interval.floor（dateRange[0]）、interval.ceil（dateRange[1]）；
console.log（“间隔”，所有间隔）；//这将输出一个数组，其中包含最小日期和最大日期之间的所有天/小时/任何时间
//映射到输出范围的输入域
binner.domain（[allIntervals[0]，allIntervals[allIntervals.length-1]）；
binner.range（[0，allIntervals.length-1]）；
//确保我们只输出整数-这很重要，因为我们将填充数组
宾纳插值（d3插值环）；
//空直方图
var hist=[]；
对于（var i=0；i

我把它和一个非常基本的柱状图放在一起

---

注意：您可能可以用毫秒数代替interval.range（…）调用来提高性能，但是如果您想执行（例如）工具提示，那么拥有所有值可能会很有用。

您必须使用常用的浏览器javascript控制台，JSFIDLE没有自己的控制台视图。我添加此代码是为了绘制轴，但轴不显示

var time\u axis=d3.svg.axis（）.scale（binner）；d3.选择（“svg”）.追加（“g”）.属性（“类”、“x轴”）.属性（“转换”、“翻译（0）”、+400+））。调用（时间轴）您可能什么也看不到，因为您正在沿y方向翻译400，而svg只有400高。尝试更改svg元素的高度。另一部分是宾纳映射到整数，而不是像素。对于轴，您需要具有所需宽度范围（以像素为单位）的比例。关于轴有一个很好的教程。现在我如何将杆向右移动50？我把宽度和高度定为450。另外，将图形向下移动？只需移动绘图区域。因此，您需要创建一个svg组来容纳所有的条，并在其上设置一个转换。检查。