在 d3 图上使用 JSON.parse(JSON.stringify(data)) 给出 d3.v6.js：1816 错误： <path> 属性 d：预期数字，"MNaN，

Question

我试图让d3.js示例中的简单折线图使用JSON而不是CSV文件。

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格式？

Answer 1

如果你有json数据，你需要使用d3.json。虽然两者之间的主要区别是一个解析带有列标题的分隔文本，另一个解析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 } });
...

如本例所示。

这种方法也适用于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数组，要么是对象。如果这不是真的，那么url、有效的csv/json格式等都有问题。没有必要将数据转换回json，然后再转换回JavaScript数组/对象：这是一个不必要的步骤，尽管在大多数情况下应该相对无害。

至于您的错误：您在错误消息中有一些SVG路径数据，每个坐标的x值似乎都是NaN，在处理图形和图表时，这几乎总是一个指标：

• 一个坏的x标度
• 错误/缺少x值，或
• 小数位数和数据类型不匹配

在这种情况下，可能是因为没有执行行函数，并且在创建缩放比例和缩放比例时使用了未分析的日期。