DC.js 3.0.2 饼图在多浏览器及移动端无法显示并抛出TypeError错误求助

嘿，我看到你遇到的麻烦了——饼图在Chrome能正常显示，但Edge、Firefox和移动端都没反应，还抛出了Uncaught TypeError: Cannot read properties of undefined (reading 'by')的错误。结合你贴的代码和报错信息，我找到了大概率的问题根源：

问题核心：变量声明的语法疏漏 #

看你代码里的变量声明段：

var ndx           = crossfilter(experiments),
runDimension  = ndx.dimension(function(d) {return "run-"+d.Run;})
speedSumGroup = runDimension.group().reduceSum(function(d) {return d.Speed * d.Run;});

这里runDimension那一行的结尾少了一个逗号！Chrome的自动分号插入（ASI）机制比较宽松，可能帮你“补全”了这个语法问题，但Firefox、Edge等浏览器对ASI的处理更严格，导致speedSumGroup没有被正确赋值，甚至runDimension的创建都可能异常。最终DC.js在调用group的by方法时，拿到的是一个undefined的对象，自然就抛出了这个错误。

修复方法 #

只需要在runDimension行的末尾补上逗号，修正后的变量声明代码如下：

var ndx           = crossfilter(experiments),
runDimension  = ndx.dimension(function(d) {return "run-"+d.Run;}),
speedSumGroup = runDimension.group().reduceSum(function(d) {return d.Speed * d.Run;});

额外检查建议 #

如果修复后仍有问题，可以再核对以下几点：

• 确认morley.csv的文件路径正确，所有浏览器都能正常加载（可以在开发者工具的Network面板查看请求状态）
• 检查CSV文件里的Run和Speed字段确实存在且格式无误（Chrome能运行说明数据没问题，但保险起见可以再确认）
• 若移动端是较旧版本浏览器，可检查是否支持ES6 Promise语法（不过现代浏览器基本都支持，这个概率很低）

备注：内容来源于stack exchange，提问作者Cees