Question

我想使用dc.js创建一个“时间轴”类型的行图表。我可以在d3中生成此图表，但不能在dc中复制。

该行图将具有一个时间轴x轴，并且条形图将在该轴上的某个时间点开始，并在该轴上的另一个时间点结束。

每行数据都有一个ID，一个startDate和一个endDate：

{
"id": 31,
"startDate": "2016-9-22",
"endDate": "2019-1-15"
},
{
"id": 29,
"startDate": "2016-9-21",
"endDate": "2016-9-28"
}

要在D3中实现这一目标，我设置了一个比例尺：

let xScale = d3.scaleTime()
            .domain([d3.min(data, function(d){ return new Date(d.startDate)}), d3.max(data, function(d){ return new Date(d.endDate)})])
            .range([0, 500]);

然后我添加矩形，使用xScale设置x和width属性：

svg.selectAll('rect')
          .data(data)
          .enter()
          .append('rect')
          .attr('x', function(d){ return xScale(new Date(d.startDate))})
          .attr('width', function(d) { return xScale(new Date(d.startDate)) - xScale(new Date(d.endDate))})

在dc.js中，我已经参与其中了，但是有一些我不理解的行为

我定义了交叉滤镜，尺寸和xScale：

let ndx = crossfilter(data);
let idDim = ndx.dimension(function(d){ return d.id});
let xScale = d3.scaleTime()
            .domain([d3.min(data, function(d){ return new Date(d.dateCreate)}), d3.max(data, function(d){ return new Date(d.dateCompleted)})])
            .range([0, 500])

然后我创建一个组：

let idGroup = idDim.group().reduceSum(function(d){ return new Date(d.dateCompleted)});

（对于此示例，我仅尝试使条形的宽度从0点扩展到dateCompleted，我稍后会担心设置x属性）

然后我像这样创建图表：

idChart
            .dimension(idDim)
            .group(idGroup)
            .height(500)
            .width(500)
            .x(xScale)
dc.renderAll()

结果是，这些条出现了，并且大致在正确的位置，只是它们的长度比应有的长得多，并且可以转换-9746像素。

dc.js version looks like this

我认为我没有正确解析日期，有人对我要去哪里出错有任何想法吗？如何停止翻译？就像我说的，我认为一旦完成这项工作，设置x属性应该很容易。

Answer 1

我发现，在将数据馈送到交叉过滤器之前，对其进行“清理”和规范化效果更好，使其更易于理解和处理。

例如，而不是每次需要日期时都执行新的Date（d.xxx），而是循环遍历每个数据并一次对所有数据进行一次转换来开始代码另外，我使用d3将日期转换为js日期的字符串

var day = d3.time.format("%Y-%m-%d");
data.forEach(function(d){
{ 
  d.id = +d.id; //convert the id to an int, json is string only
  d.startDate = day(d.startDate)
  d.endDate = day(d.endDate)
})

使用带有日期刻度的dc.js的“时间线”行图

1 个答案: