d3.js debug备忘录

        常言道：写代码一时爽，debug火葬场，debug所用的时间和精力有时比初步完成代码结构所需的还多。下面，我根据自己找bug的经验总结了一些给d3数据图找bug的规律，供自己和大家在debug时自检。以后还会不断添加内容，也十分欢迎大家的补充。

         出现bug后的第一步：右键【检查元素】-【Console】，查看输出内容所体现的bug。若这样做无法解决bug，再从以下方面检查：

一、数据图不显示

原因1：数据未能正确读取

（1）源数据格式错误

可能存在的问题：

        a.列标题格式错误

        解决方案：参考“列标题命名规范”：清晰、短、无空格。

        b.csv文件的编码格式错误：Unicode vs UTF-8

        特征：用文本编译器打开csv时出现乱码。

        解决方案：用记事本打开csv文件，【另存为】-【编码】-更改编码格式。更改编码格式后，用excel打开该csv文件可能会出现乱码，不过没关系。

        c.源数据中有多余的空行

        特征：用文本编译器打开csv后，数据行下面有多行逗号。

        解决方案：将多余的逗号行删掉。

（2）代码错误

可能存在的问题：

        a.变量类型与源数据类型不匹配

        b.变量个数与源数据个数不匹配

        解决方案：在d3代码部分里由上至下一步步console.log。

（3）与源数据相关的其他注意事项：

        a.将excel另存为csv后，关闭excel时，当出现“是否保存**.csv”时，选否，否则会将此excel保存为csv，失去excel中的公式。

        b.将excel中的数据用“更改单元格格式”的方式处理后，如减少小数位数，在文本编译器里打开的时候和读取数据的时候还是会显示数据原来的格式。此时应该用写函数的方式彻底修改数据格式，再进行另存为csv等后续操作。

原因2：图的样式未能展现

解决方案：检查该数据图的父元素的显示情况。

二、数据图显示但有别的bug

解决方案：

1、在出现问题的网页元素上右键-【检查元素】，在弹出的窗格中查看该元素的类或id，再在Source中的相应文件里ctrl+F查找该类或id，查看其属性以发现问题。亦可在文本编译器里查找。

2、查找自己的低级错误：

        a.变量名、文件名拼写错误

        b.代码中出现中文标点符号

        c.局部变量与全局变量混淆

三、浏览器缓存问题

特征：右键【检查】，单击【Source】，Source中的内容与实际不符，如文件缺失、之前的改动没有体现。

解决方案：先清除浏览记录，再刷新网页。

四、写代码过程中需要注意的其他问题

1、在MAMP弹出的网页里单击文件夹名称，直接出现文件夹中的一个网页，而不是文件夹中的文件。

原因：该文件夹中有一个网页的名称是“index.html”。

解决方案：更改该网页名称。

2、注意链接的d3.库的版本与代码是否一致。

3、调试时每次只改一处代码，如果没达到效果，那么先撤销刚才的改动，再进行其他尝试。必要时，先保存该文件的副本，再进行debug尝试。