使用DC、D3与Crossfilter开发网页时遇Uncaught ReferenceError错误求助

错误原因 #

你遇到的这个错误是典型的异步加载时序问题：

Uncaught ReferenceError: data is not defined

d3.csv()是一个异步函数——它会在后台请求并加载你的mydata.csv文件，而你写在回调函数外面的代码（比如var ndx = crossfilter(data);）会在CSV文件加载完成前就直接执行了。这时候data变量还没被回调函数赋值，自然就会抛出"未定义"的错误。

修正方案 #

解决方法很简单：把所有依赖data的代码都移到d3.csv()的回调函数内部，确保只有当数据完全加载就绪后，才执行Crossfilter和DC相关的逻辑。

修正后的完整代码如下：

JavaScript代码

d3.csv("mydata.csv", function(error, data) {
  if (error) throw error;
  console.log(data);

  // 所有需要用到data的逻辑都放在这个回调里
  var ndx = crossfilter(data);
  var ratingDim = ndx.dimension(function(d) {
    return d.rating;
  });
  var total_10 = ratingDim.filter(3);

  // 调用打印过滤器的函数
  print_filter("total_10");
});

// 工具函数可以放在回调外面，不依赖data的代码都没问题
function print_filter(filter){
  var f=eval(filter);
  if (typeof(f.length) != "undefined") {}else{}
  if (typeof(f.top) != "undefined") {f=f.top(Infinity);}else{}
  if (typeof(f.dimension) != "undefined") {f=f.dimension(function(d) { return "";}).top(Infinity);}else{}
  console.log(filter+"("+f.length+") = "+JSON.stringify(f).replace("[","[\n\t").replace(/}\,/g,"},\n\t").replace("]","\n]"));
}

HTML代码（保持不变，但注意脚本加载顺序）

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.12/crossfilter.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dc/3.0.3/dc.js"></script>

注：脚本加载顺序要注意——先加载D3，再加载Crossfilter，最后加载DC.js，因为DC依赖前两个库。

额外说明 #

在早期的D3版本（比如你用的3.4.11）中，异步数据加载使用的是回调函数；如果是新版本D3（v5+），则改用了Promise和async/await语法，但核心逻辑都是一样的：必须等待数据加载完成后，再执行依赖该数据的代码。

内容的提问来源于stack exchange，提问作者user3329081