javascript - D3.extent() 抛出 TypeError : Values is not iterable

Question

在过去的三个小时里，我一直在为这个问题摸不着头脑，如果有人可以帮忙，请帮忙。我不太擅长 D3 与 React 的结合。

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

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

这就是 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);

这部分抛出错误。

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

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