【发布时间】：2021-02-13 00:50:48
【问题描述】：
我正在尝试使用 d3 创建两个折线图，但我不断收到此错误，我不知道如何解决它。折线图应该用 X 轴上的纪元时间和 yAxis(Disk_Free, Memory_Free) 上的健康值制作。我已将数据集值更改为浮点值，但我认为时间值有问题.我对 d3 很陌生，所以任何建议都会有所帮助。
这是我的数据集
[
{
Health_id: 1,
Epoch_Time: 1603959168.903983,
Disk_Free: '86.2',
Memory_Free: '1555480576',
},
{
Health_id: 2,
Epoch_Time: 1603959183.331211,
Disk_Free: '86.2',
Memory_Free: '1552396288',
},
{
Health_id: 3,
Epoch_Time: 1603959197.5066514,
Disk_Free: '86.2',
Memory_Free: '1565560832',
},
{
Health_id: 4,
Epoch_Time: 1603959211.6641965,
Disk_Free: '86.2',
Memory_Free: '1602510848',
},
{
Health_id: 5,
Epoch_Time: 1603959225.8478744,
Disk_Free: '86.2',
Memory_Free: '1594617856',
},
]
我的 d3 行生成代码如下所示
static getDerivedStateFromProps(nextProps, prevState){
const { data } = nextProps; //This is where I accept the above dataset and I try creating the line charts with it
if(!data){
return {};
}
const xScale = d3.scaleTime().range([margin.left,width-margin.right]);
const yScale = d3.scaleLinear().range([height-margin.botton,margin.top])
//Set Domains on Scales
const timeDomain = d3.extent(data, d=>(d.Epoch_Time*1000))
const healthID = d3.extent(data, d=>(d.Health_id))
xScale.domain(timeDomain)
yScale.domain(healthID)
//Create and use line generator to plot the line charts
const lineGenerator = d3.line().x(d=>xScale((d.Epoch_Time*1000)))
const lines = [
{
path:lineGenerator.y((d)=>yScale((d.Disk_Free)))(data)
},
{
path:lineGenerator.y((d)=>yScale((d.Memory_Free)))(data)
},
];
return {lines, xScale, yScale};
}
render(){
return(
<div className="main-body">
<h4 center>Line Chart Test</h4>
<svg>
<g>
{this.state.lines.map((d,i)=>{
if(i===0){
return <path d={d.path} fill="none" stroke="red" />
}
else{
return <path d={d.path} fill="none" stroke="blue" />
}
})}
</g>
</svg>
</div>
)
}}export default Chart;
我在运行网站时没有得到任何折线图，它显示的错误是：
Error: <path> attribute d: Expected number,
"….00000665251144,NaNL35.097628459…".
我的 svg 路径如下所示：
<path d="M35.00203802950035,NaNL102.09192541055444,NaNL168.70615737356852,NaNL235.2960961666892,NaNL301.9796416583058,NaNL368.6469772068924,NaNL435.1701408263458,NaNL01.790251499806,NaNL568.4943668788065,NaNL635.0026281969162,NaN" fill="none"stroke="red">
</path>
【问题讨论】：
-
您的 yScale 有问题 - 记录它的域和范围会发现问题。范围是
[NaN,someNumber]- 您的边距对象可能没有名为botton的属性：range([height-margin.botton,margin.top])。不过，考虑到 Memory_Free 值的大小与域相比，一旦比例范围固定，您可能无法获得所需的线。 -
您能否就如何正确生成一行提出任何建议？就像我说的那样，我对此很陌生，所以我想不出任何替代方案。
-
好吧，如果您更正范围内的拼写错误（并将字符串转换为如下数字），您至少会得到一个没有
NaNs 的有效行吗？如果是这样，那么这只是设置正确域的问题，这与您遇到的错误是分开的。 -
是的，我有一条有效的线路，但看不到域。
-
好 - 现在我们可以查看域。域是 [1,5] - 值 1 将被缩放为等于该范围中的第一个值，值 5 将被缩放为等于该范围中的第二个值。由于您的数据在内存和磁盘的 [1,5] 之外，因此您的线将在您的范围之外绘制。相当大，因为磁盘是规模范围上限的 16 倍左右，而内存要多几个数量级。您可能希望在设置中为每一行设置域，使用不同的比例，域等于
d3.extent(data, function(d) { return d.PropertyBeingScaled })
标签： javascript reactjs svg d3.js