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

Question

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

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

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

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