2

在过去的三个小时里,我一直在为此挠头,如果有人可以帮忙,请帮忙。我不太擅长将 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);

这部分是抛出错误。

4

1 回答 1

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);
于 2020-11-17T14:24:06.710 回答