在 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 Error: attribute d: Expected number, "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 } });
     ...

正如在example 中看到的那样。

这种方法也适用于 d3.csv，只是您可以使用 row 函数：

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 值，或
• 比例和数据之间的数据类型不匹配。

在这种情况下，可能是由于未执行行函数，并且您在创建比例然后进行缩放时使用了未解析的日期。