从D3获取错误时如何调试

Question

所有

我想知道是否有人能给我一些如何跟踪D3中的错误的线索。

例如，我画了一个折线图，我从D3得到了一些错误：

 Error: Invalid value for <line> attribute y2="NaN" d3.js:7571

这个错误很可能是由我的代码中的某些非法（无值或NaN或其他）数据绑定引起的，但是如何追溯到我的代码而不是D3中找到此错误的位置？

由于

Answer 1

我发现在Google Chrome浏览器中使用控制台很有用。

这可以通过在违规页面上按F12启用，并在底部打开一个单独的窗口。

此窗口中的控制台选项卡将显示有关页面中发现的错误的信息。

作为一个例子，我插入了一个随机的＆＃39;我的d3.js代码中的分号;

（这是在'Geany＆＃39;编辑器中）

在控制台选项卡中，错误标识如下;

这将显示错误的描述和区域的指示。在这种情况下，控制台在以下行上出错，因为它将分号视为有效，但这使得以下代码无效，但您明白了。

在Firefox中有一个名为firebug的插件，我相信它会允许同样的事情。

Answer 2

根据我的经验，调试此类错误并不是一个非常好的方法，但有一种解决方法。

当属性值设置为NaN时，会引发错误。实际上，这本身很容易调试，因为您可以在控制台中扩展错误并查看堆栈跟踪以查找在哪个文件中以及在调用堆栈的哪一行设置NaN值。 / p>

但是当你也有过渡时，那就变得不可能了。这是因为最终负责设置attr()值的NaN调用是异步运行的（即稍后通过setTimeout）。因此，您不再需要堆栈跟踪，以便查看代码中NaN的来源。

因此，作为一种解决方法，您可以暂时注释掉代码中的所有转换，重新加载页面，并且您将收到一条错误消息，指出您会遇到错误。

如果您不想这样做，那么您唯一的另一个选择是查看您的代码。您可以缩小到代码中在<line>节点上设置属性的位置（因为错误大约是<line>）。然后，您可以在该常规区​​域中插入debugger语句，并逐步执行代码以查找导致其输出NaN的原因。