未显示D3部分仪表板

时间:2016-12-21 20:18:31

标签: javascript d3.js

我已经使用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}}令牌。我三重检查以确保这些行仍被数据解析功能所包围。所以我不确定为什么会发生这种情况。我确实相信条形码代码的底部,所以如果有人可以发现什么阻碍了我,我将非常感激。

谢谢

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调用最终会被关闭)

还有更多的错误,但是它们正在吞噬它们以及它们没有出现的原因。