[英]First 2 entries on stacked bar chart not displaying in dc.js / d3.js
I am learning d3 and dc.js for a visualiation project. 我正在为可视化项目学习d3和dc.js。 The URL to my experiment is here: http://junklogic.com/d3scratch/index.html
我实验的网址是: http : //junklogic.com/d3scratch/index.html
I have a small CSV file of 10 entries as follows. 我有一个10个条目的小型CSV文件,如下所示。 I have 2 problems that have to do with the first 2 entries:
我有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
The 2 problems I have are: 我遇到的两个问题是:
Thank you in advance for any help. 预先感谢您的任何帮助。 This is a new experience and I hope my code is understandable.
这是一种新的体验,我希望我的代码可以理解。
Your domain for the x-axis is "2013-11-11T10:23:24" to "2013-11-18T18:01:58". 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)]);
Your x dimension is rounding to the day, so your bar will be rendered at "2013-11-11T00:00:00". 您的x尺寸四舍五入到一天,因此您的柱形图将在“ 2013-11-11T00:00:00”呈现。 Therefore the first two values are less than the lower end of the domain.
因此,前两个值小于域的下限。 You might want to calculate the domain using d3.time.day... with perhaps a day buffer on each end.
您可能要使用d3.time.day ...来计算域,两端可能都有一天的缓冲时间。
var severityByDay = info.dimension(function(d) {
return d3.time.day(d.date);
});
Try this to see all the bars: 试试看所有的酒吧:
var xScale = d3.time.scale().domain([new Date(2013, 10, 10), new Date(2013, 10, 19)]);
As for the legend on the bar chart, you'll want to name each stack... otherwise it will default to the index of the stack. 至于条形图上的图例,您需要为每个堆栈命名...否则它将默认为堆栈的索引。
From https://github.com/NickQiZhu/dc.js/blob/master/web/docs/api-latest.md#stack-mixin : 从https://github.com/NickQiZhu/dc.js/blob/master/web/docs/api-latest.md#stack-mixin :
.stack(group[, name, accessor])Stack a new crossfilter group into this chart with optionally a custom value accessor.
.stack(group [,name,accessor])使用可选的自定义值访问器将新的交叉过滤器组堆叠到此图表中。 All stacks in the same chart will share the same key accessor therefore share the same set of keys.
同一张图表中的所有堆栈将共享相同的密钥访问器,因此共享相同的密钥集。 In more concrete words, imagine in a stacked bar chart all bars will be positioned using the same set of keys on the x axis while stacked vertically.
用更具体的话来说,假设在堆叠的条形图中,垂直堆叠时,所有条形都将在x轴上使用同一组键定位。 If name is specified then it will be used to generate legend label.
如果指定了名称,那么它将用于生成图例标签。
This seems to show the correct values and the correct colors: 这似乎显示正确的值和正确的颜色:
.group(severityHigh, "1")
.stack(severityMed, "2")
.stack(severityLow, "3")
.colors(graphColors)
.colorDomain([1, 3])
I hope this helps! 我希望这有帮助! -DJ
-DJ
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.