堆叠条形图上的前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