Question

我有数据。让我们说：

date,comments
19-Apr-2016,Today was great.
21-Apr-2016,Today was not so great.
1-May-2016,Interesting things happened!

（所有日期都被解析为当然日期）

我希望从2016年4月19日到2016年5月1日每天都进行，并为每个日创建一个元素，然后将相关数据注入其中。例如：

19-Apr-2016 - Today was great.
20-Apr-2016 - <No entry>
21-Apr-2016 - Today was not so great.
22-Apr-2016 - <No entry>
...
1-May-2016 - Interesting things happened!

这是当前的代码。它完成前者并为每个数据点创建一个元素：

preview.selectAll("svg")
    .append("g")
    .data(sums)
    .enter()
    .append("rect")
    // Drawing code etc. Setting height, class, color, w/e

无论是否有数据，我如何遍历所有日子？

Answer 1

这是我将如何解决这个问题的伪代码。

想象一下，你的sums对象是一个存储你所代表的数据的数组

19-Apr-2016 - Today was great. 20-Apr-2016 - <No entry> 21-Apr-2016 - Today was not so great. 22-Apr-2016 - <No entry> ... 1-May-2016 - Interesting things happened!

现在在我绘制的函数中，我会这样做

var start = new Date(2016, 3, 19);//19-Apr-2016
var end = new Date(2016, 4, 1);//1-May-2016
for (var d = start; d <= end; d.setDate(d.getDate() + 1)) {
  //for each date append a group
  var grp = preview.selectAll("svg").append("g")
  var myData = //get the data from sums array for which the date is d(in iterator)
  if(myData){
    grp.append("rect").style("stroke", 1) ...
  }else {
   //date not in the sums array.
  }

}

希望这有帮助！

Answer 2

D3的内置nest可能是最简单的方法。

不要直接绑定sums。首先按日期将数据分组为nest，然后根据该分组绘制图表。

浏览D3中所有数据点之间的所有值

2 个答案: