堆积条形图上的前 2 个条目未显示在 dc.js / d3.js 中

Question

我正在为一个可视化项目学习 d3 和 dc.js。我的实验网址在这里：http://junklogic.com/d3scratch/index.html

我有一个包含 10 个条目的小型 CSV 文件，如下所示。我有 2 个与前 2 个条目有关的问题：

creature_name,seenby,date,severity
Dragon,Bob,2013-11-11T10:23:24,1
Dire Wolf,Sue,2013-11-11T08:24:23,3
Unicorn,Jim,2013-11-12T11:10:10,1
Unicorn,Ann,2013-11-12T12:45:45,1
Kraken,Bob,2013-11-12T08:31:51,2
Chimera,Ann,2013-11-12T01:05:08,2
Unicorn,Ann,2013-11-13T04:49:36,1
Unicorn,Bob,2013-11-14T09:22:26,1
Chimera,Ann,2013-11-16T12:37:04,2
Troll,Ann,2013-11-18T18:01:58,3

我遇到的两个问题是：

1. 表示第一天 (2013-11-11) 的前 2 个条目未显示在条形图中。数据表和饼图正确显示数据（所有 10 个条目）。
2. “严重性” 是从 1 到 3 的计数。条形图显示 0 到 2。数据表和饼图显示正常。

提前感谢您的帮助。这是一种新体验，我希望我的代码是可以理解的。

Answer 1

您的 x 轴域是“2013-11-11T10:23:24”到“2013-11-18T18:01:58”。

    var xScale = d3.time.scale().domain([new Date(data[0].date), new Date(data[data.length - 1].date)]);

您的 x 维度四舍五入，因此您的条形图将呈现在“2013-11-11T00:00:00”。因此，前两个值小于域的下限。您可能希望使用 d3.time.day... 计算域...可能在每一端都有一个天缓冲区。

    var severityByDay = info.dimension(function(d) {
        return d3.time.day(d.date);
    });

试试这个看看所有的酒吧：

    var xScale = d3.time.scale().domain([new Date(2013, 10, 10), new Date(2013, 10, 19)]);

至于条形图上的图例，您需要为每个堆栈命名...否则它将默认为堆栈的索引。

来自https://github.com/NickQiZhu/dc.js/blob/master/web/docs/api-latest.md#stack-mixin：

.stack(group[, name, accessor])将新的交叉过滤器组堆叠到此图表中，并可选择自定义值访问器。同一图表中的所有堆栈将共享相同的密钥访问器，因此共享同一组密钥。更具体地说，想象在堆叠条形图中，所有条形将使用 x 轴上的同一组键定位，同时垂直堆叠。如果指定了名称，那么它将用于生成图例标签。

这似乎显示了正确的值和正确的颜色：

.group(severityHigh, "1")
        .stack(severityMed, "2")
        .stack(severityLow, "3")
        .colors(graphColors)
        .colorDomain([1, 3])

我希望这会有所帮助！ -DJ