时间戳

首页 > 解决方案 > D3.extent() 抛出 TypeError ：值不可迭代

javascript - D3.extent() 抛出 TypeError ：值不可迭代

问题描述

在过去的三个小时里，我一直在为此挠头，如果有人可以帮忙，请帮忙。我不太擅长将 D3 与 React 结合使用。

所以，基本上，我在后端 Flask 应用程序中运行了一个异常检测器算法，它以字典的形式返回值（然后通过 json.dumps() 转换为 json 对象），进一步，使用 D3 在我的 React 应用程序上绘制.

最初，我认为问题出在我的数据库上，因为该应用程序在代码沙盒和我之前的所有版本中都能完美运行。

这就是 console.log(data) 的样子： 在此处输入图像描述

有人告诉我，A_Epoch(3) 和 Time_Epoch(151) 的不同数据点可能存在问题。解决了也无济于事。

这是代码的样子：

const timeDomain = d3.extent(data, d=>(d.Time_Epoch*1000));
const bytesReadDomain = d3.extent(data, (d) => d.Bytes_Read);
const bytesWriteDomain = d3.extent(data, (d) => d.Bytes_Write);
const bytesSentDomain = d3.extent(data, (d) => d.Bytes_Sent);
const bytesRecvDomain = d3.extent(data, (d) => d.Bytes_Recv);

这部分是抛出错误。

标签： javascriptreactjsd3.jsreact-d3

解决方案

data是一个对象，而不是一个数组。

d3.extent期望一个数组作为第一个参数，第二个函数d3.extent是一个可选的键函数。该函数对每个数组元素执行。因此，例如，如果您有一个复杂对象数组，每个对象都有一个id，您可以使用以下内容：

const data = [{
  id: 1,
}, {
  id: 2,
}];

console.log(d3.extent(data, (d) => d.id));
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

您实际上有一个对象，其中的值是数值数组。因此const bytesReadDomain = d3.extent(data, (d) => d.Bytes_Read);，您应该只使用

const bytesReadDomain = d3.extent(data.Bytes_Read);

这等效于d3.extent([0, 1, 2, 3, 4])，并且不需要键功能。

对于Time_Epoch，如果您想将所有值乘以 1000，只需在调用之前Array.prototype.map将相同的函数应用于所有数组元素：d3.extent()

d3.extent(data.Time_Epoch.map((d) => d * 1000);

推荐阅读