D3.extent() throws TypeError : Values is not iterable

Question

在过去的三个小时里，我一直在挠头，如果有人可以提供帮助，请提供帮助。我不是很擅长D3结合React。

所以，基本上，我在后端 Flask 应用程序中有一个异常检测器算法运行，其中 returns 值以字典的形式存在（然后通过 [= 转换为 json 对象26=]()) 将进一步使用 D3 在我的 React 应用程序上绘制。

最初，我认为问题出在我的数据库上，因为该应用程序在 codesandbox 和我之前的所有版本中都运行良好。

这是 console.log(数据) 的样子：

我被告知 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);

这部分是抛出错误。

Answer 1

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 将相同的函数应用于所有数组元素，before调用 d3.extent():

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

D3.extent() throws TypeError : Values is not iterable

D3.extent() throws TypeError : Values is not iterable

javascript

reactjs

d3.js

react-d3