我正在嘗試使用 d3.js 構建一個簡單的折線圖并將其呈現在反應組件中。不幸的是，我收到以下錯誤：
Error: <path> attribute d: Expected number, "MNaN,36.393574100…"
不幸的是，stackoverflow 的類似問題對我沒有太大幫助。我的理論是當我將路徑附加到圖表時，我沒有將資料物件（data.forEach）正確讀取到我的“d”屬性中。我已經嘗試過使用和不使用 parseDate 函式來執行此操作。當我沒有它時，我的日期看起來應該如何在控制臺中。如果我稍后在代碼中包含 parseDate 函式，同時我宣告我的 x 軸和/或在路徑 d 屬性的 x 函式內......什么都沒有真正改變。我也不完全確定我的資料物件是否正確嵌套，或者我是否應該將整個資料物件提供給 datum() 函式......
這是我的代碼：
import * as d3 from "d3";
import React, { useRef, useEffect } from "react";
function LineBarChart({ width, height, data }) {
const ref = useRef();
useEffect(() => {
d3.select(ref.current)
.attr("width", width)
.attr("height", height)
// .style("border", "1px solid black");
}, [height, width]);
useEffect(() => {
draw();
}, [data]);
const draw = () => {
const parseDate = d3.timeFormat("%Y-%m-%d");
data.forEach(function (d) {
d.dateM = d.dateM;
// d.dateM = parseDate(d.dateM);
d.closeM = d.closeM;
console.log("WHAT-DO-I-LOOK-LIKE", d.dateM)
});
// const dataNest = d3.nest()
// .key((d) => d.dateM)
// .key((d) => d.closeM)
// .map(data);
const margin = 80;
const width = 1400 - 2 * margin;
const height = 800 - 2 * margin;
const svg = d3.select(ref.current);
const chart = svg
.append("g")
.attr("class", "linechart")
.attr("transform", `translate(${margin}, ${margin})`);
var x = d3.scaleTime()
.domain(d3.extent(data, function(d) { return d.dateM; }))
//.domain(d3.extent(data, function(d) { return parseDate(d.dateM); }))
.range([ 0, width ]);
chart.append("g")
.attr("transform", "translate(0," height ")")
.call(d3.axisBottom(x));
var y = d3.scaleLinear()
.domain([0, d3.max(data, function(d) { return d.closeM; })])
.range([ height, 0 ]);
chart.append("g")
.call(d3.axisLeft(y));
chart.append("path")
.datum(data)
.attr('class', 'lineChartClass')
.attr("fill", "none")
.attr("stroke", "steelblue")
.attr("stroke-width", 1.5)
.attr("d", d3.line()
// .x(function(d) { return parseDate(d.dateM) })
.x(function(d) { return x(d.dateM) })
.y(function(d) { return y(d.closeM) })
)
}; //draw
return (
<div className="chartSixPointFive">
<svg ref={ref}></svg>
</div>
);
}
export default LineBarChart;
我的 React 應用程式使用 Axios 來訪問 Flask 端點。這里沒有什么花哨的事情，我只是像這樣回傳折線圖。
....
....
<LineBarChart width={1350} height={1000} data={data} />
如有必要，我可以包含完整的反應代碼（盡管我認為不需要）
這是我的資料物件的樣子：
"results": [
{
"date": "2022-02-07",
"open": 172.860001,
"high": 173.949997,
"low": 170.949997,
"close": 171.660004,
"volume": 77045100,
"adjClose": 171.660004
},
rinse & repeat ....
]
我很感激我能得到的任何幫助！
uj5u.com熱心網友回復：
d3.timeFormat格式化一個日期物件并回傳一個字串。相反，你想要的是d3.timeParse，它會做相反的事情：它將你的字串決議為日期物件，可以由時間尺度使用：
const parseDate = d3.timeParse("%Y-%m-%d");
PS ： “d”屬性的 M 命令使用（幾乎所有語言中的所有內容）坐標對x,y（水平/垂直）。因此，當您遇到錯誤時：
MNaN,42...
...您知道問題出在您的 x 刻度上，而錯誤：
M42,NaN...
...向您展示問題出在 y 尺度上。
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/427194.html
標籤：javascript 反应 api d3.js axios
上一篇：d35 -圍繞半圓或圓弧附加圓