Using JSON.parse(JSON.stringify(data)) on d3 graph gives d3.v6.js:1816 Error: <path> attribute d: Expected number, "MNaN,
Using JSON.parse(JSON.stringify(data)) on d3 graph gives d3.v6.js:1816 Error: <path> attribute d: Expected number, "MNaN,
我正在尝试使用 JSON 而不是 CSV 文件来制作 d3.js 示例中的简单线图。
d3.csv(filePath,
// When reading the csv, I must format variables:
d => {
return {date: d3.timeParse("%Y-%m-%d")(d.date), value: d.value}
}).then(
// Now I can use this dataset:
function (data) {
data = JSON.parse(JSON.stringify(data));
....
失败并出现错误：d3。v6.js:1816 错误：属性 d：预期数字，“MNaN，
图表代码见：https://www.d3-graph-gallery.com/graph/line_basic.html
如何使其与 JSON 格式一起使用？
如果您有 json 数据，则需要使用 d3.json。两者之间的主要区别在于，一个解析带有 headers 列的定界文本，而另一个解析 JSON。第二个微妙但在本例中是关键的区别是 d3.csv 可以提供一个行函数，逐行格式化数据，在本例中是解析日期的函数。我们可以使用 d3.json 实现相同的结果，但我们需要等到加载数据之后：
d3.json("data.json").then(function(data) {
data = data.map(function(d) { return { date : d3.timeParse("%Y-%m-%d")(d.date), value : d.value } });
...
如此 example.
此方法也适用于 d3.csv，只是您可以改用行函数：
d3.csv("data.csv", function(d) { return { date : d3.timeParse("%Y-%m-%d")(d.date), value : d.value } })
.then(function(data) { ...
d3.csv返回的数据是一个javascript数组。 d3.json 返回的数据是 javascript 数组或 object。如果这不是真的，则 url、有效 csv/json 格式等存在问题。无需将数据转换回 JSON，然后再转换回 JavaScript array/object: 这是一个不必要的步骤，尽管在大多数情况下它应该是相对无害的。
关于你的错误：你在错误信息中有一些SVG路径数据，看起来每个坐标的x值都是NaN，在处理图形和图表时几乎总是一个指标：
- x 刻度不好，
- bad/missing x 值，或
- 刻度和数据之间的数据类型不匹配。
在这种情况下，可能是由于未执行行函数并且您在比例创建和缩放中使用了未解析的日期。
我正在尝试使用 JSON 而不是 CSV 文件来制作 d3.js 示例中的简单线图。
d3.csv(filePath,
// When reading the csv, I must format variables:
d => {
return {date: d3.timeParse("%Y-%m-%d")(d.date), value: d.value}
}).then(
// Now I can use this dataset:
function (data) {
data = JSON.parse(JSON.stringify(data));
....
失败并出现错误：d3。v6.js:1816 错误：属性 d：预期数字，“MNaN，
图表代码见：https://www.d3-graph-gallery.com/graph/line_basic.html
如何使其与 JSON 格式一起使用？
如果您有 json 数据，则需要使用 d3.json。两者之间的主要区别在于，一个解析带有 headers 列的定界文本，而另一个解析 JSON。第二个微妙但在本例中是关键的区别是 d3.csv 可以提供一个行函数，逐行格式化数据，在本例中是解析日期的函数。我们可以使用 d3.json 实现相同的结果，但我们需要等到加载数据之后：
d3.json("data.json").then(function(data) {
data = data.map(function(d) { return { date : d3.timeParse("%Y-%m-%d")(d.date), value : d.value } });
...
如此 example.
此方法也适用于 d3.csv，只是您可以改用行函数：
d3.csv("data.csv", function(d) { return { date : d3.timeParse("%Y-%m-%d")(d.date), value : d.value } })
.then(function(data) { ...
d3.csv返回的数据是一个javascript数组。 d3.json 返回的数据是 javascript 数组或 object。如果这不是真的，则 url、有效 csv/json 格式等存在问题。无需将数据转换回 JSON，然后再转换回 JavaScript array/object: 这是一个不必要的步骤，尽管在大多数情况下它应该是相对无害的。
关于你的错误：你在错误信息中有一些SVG路径数据，看起来每个坐标的x值都是NaN，在处理图形和图表时几乎总是一个指标：
- x 刻度不好，
- bad/missing x 值，或
- 刻度和数据之间的数据类型不匹配。
在这种情况下，可能是由于未执行行函数并且您在比例创建和缩放中使用了未解析的日期。