我已经使用D3大约一年了,而且我过去制作仪表板没有问题。然而,这次我在路上遇到了一个相当奇怪的颠簸。我有一个带有topo JSON的地理仪表板和一个水平条形图,可以在我的gist / block中找到:
http://bl.ocks.org/diggetybo/77469aa2acec38f1870197724ea671d6
注意你可能要点击查看完整的视图窗口,块网站似乎将iframe高度设置为500.(你可以忽略除index.html之外的所有文件,其他文件只是源代码,我的tsv数据文件)
过去,我的典型仪表板技术是为仪表板的每个图形分配一个单独的div。然而,这里的问题是,应该在美国地图下可见水平条。但是,尽管有很多修补,但不会显示水平条。我仍然以同样的方式添加它们 - 它在过去一直对我有效。所以基本上,我不确定为什么没有显示水平条形图。
开发人员工具报告根本没有错误 - 这很奇怪。我可以清楚地看出有什么问题,因为我的仪表板有一半丢失了。
我在index.html中添加了注释,以指示代码的条形图部分的位置。具体而言,行:159-228。
为了以防万一,概念性地阐明水平条形图“正在做什么”也可能会有所帮助。它应该从一个变量中追加rects,该变量将我的解析数据从最大值排序到最小值(在我的tsv中为d.fxb),并根据线性色标给出填充。
更新
我已经关闭了样式调用,现在我在解决其他错误时遇到了麻烦。可悲的是,我陷入了代码条形图部分的第一行。第160行。我更新了要点,我将在此处包含相关的行以供参考:
var values = data.fxb.sort(function(a, b) {
return -(a - b);
});
var name_value_array = json.features.name;
var name_values = name_value_array.sort(function(a, b) {
return -(a.value - b.value);
});
我收到的错误是:“无法读取未定义的属性”排序。据我所知,应该定义数组。这次我非常小心确保所有内容都包含在正确的{{ 1}}令牌。我三重检查以确保这些行仍被数据解析功能所包围。所以我不确定为什么会发生这种情况。我确实相信条形码代码的底部,所以如果有人可以发现什么阻碍了我,我将非常感激。
谢谢
答案 0 :(得分:2)
这不会解决您的所有问题,但您未能关闭此style
call。
.style("fill", function(d) {
// Get data value
var value = d.properties.fxb;
if (value=='None') {
return "#999999"
}
if (value) {
//If value exists…
return color(value);
} else {
//If value is undefined…
return "#999999";
}
您最后还会在脚本底部添加额外的});
(style
调用最终会被关闭)
还有更多的错误,但是它们正在吞噬它们以及它们没有出现的原因。