时间戳

首页 > 解决方案 > 从 JSON 中的 csv 文件中提取值 [SyntaxError: 位置 0 处 JSON 中的意外标记 a]

json - 从 JSON 中的 csv 文件中提取值 [SyntaxError: 位置 0 处 JSON 中的意外标记 a]

问题描述

我在这篇文章底部的代码中使用了VEGA 。当我手动指定 a、b、c 和 d 的值时，代码可以正常工作。

现在我正在尝试更改代码，而不是手动指定广告的值，而是从 csv 文件中读取它[看起来像这样：[在此处输入图像描述

但是我的问题是图表无法显示任何信息，而是在 chrome 的控制台中收到以下错误： 在此处输入图像描述

这是我的配置文件：

{
  "$schema": "https://vega.github.io/schema/vega/v4.json",
  "width": 400,
  "padding": 5,
  "autosize": "pad",
  "data": [
    {
      "url": "data/summary3.csv",
      "name": "tuples",
      "transform": [
        {
          "type": "aggregate",
          "groupby": ["a", "b", "d"],
          "fields": ["c"],
          "ops": ["average"],
          "as": ["c"]
        }
      ]
    },
    {
      "name": "trellis",
      "source": "tuples",
      "transform": [
        {"type": "aggregate", "groupby": ["a"]},
        {
          "type": "formula",
          "as": "span",
          "expr": "rangeStep * bandspace(datum.count, innerPadding, outerPadding)"
        },
        {"type": "stack", "field": "span"},
        {"type": "extent", "field": "y1", "signal": "trellisExtent"}
      ]
    }
  ],
  "legends": [
    {"fill": "color", "orient": "right", "title": "Objective Categories"}
  ],
  "signals": [
    {"name": "rangeStep", "value": 20},
    {"name": "innerPadding", "value": 0.1},
    {"name": "outerPadding", "value": 0.2},
    {"name": "height", "update": "trellisExtent[1]"},
    {"name": "colors", "value": ["#1f77b4", "#2ca02c", "#ff7f0e", "#1f77b4"]}
  ],
  "scales": [
    {
      "name": "xscale",
      "domain": {"data": "tuples", "field": "c"},
      "nice": true,
      "zero": true,
      "round": true,
      "range": "width"
    },
    {
      "name": "color",
      "type": "ordinal",
      "range": {"signal": "colors"},
      "domain": {"data": "trellis", "field": "a"}
    }
  ],
  "axes": [
    {
      "orient": "bottom",
      "scale": "xscale",
      "title": "Percent complete",
      "ticks": true,
      "labels": true,
      "grid": true,
      "domain": true
    }
  ],
  "marks": [
    {
      "type": "group",
      "from": {
        "data": "trellis",
        "facet": {"name": "faceted_tuples", "data": "tuples", "groupby": "a"}
      },
      "encode": {
        "enter": {"x": {"value": 0}, "width": {"signal": "width"}},
        "update": {"y": {"field": "y0"}, "y2": {"field": "y1"}}
      },
      "scales": [
        {
          "name": "yscale",
          "type": "band",
          "paddingInner": {"signal": "innerPadding"},
          "paddingOuter": {"signal": "outerPadding"},
          "round": true,
          "domain": {"data": "faceted_tuples", "field": "b"},
          "range": {"step": {"signal": "rangeStep"}}
        }
      ],
      "axes": [
        {
          "orient": "left",
          "scale": "yscale",
          "ticks": false,
          "domain": false,
          "labelPadding": 4
        }
      ],
      "marks": [
        {
          "type": "rect",
          "from": {"data": "faceted_tuples"},
          "encode": {
            "enter": {
              "x": {"value": 0},
              "x2": {"scale": "xscale", "field": "c"},
              "fill": {"scale": "color", "field": "a"},
              "strokeWidth": {"value": 2},
              "tooltip": {"field": "d"},
              "hover": {"fill": {"value": "red"}}
            },
            "update": {
              "y": {"scale": "yscale", "field": "b"},
              "height": {"scale": "yscale", "band": 1},
              "stroke": {"value": null},
              "zindex": {"value": 0}
            },
            "hover": {"stroke": {"value": "firebrick"}, "zindex": {"value": 1}}
          }
        }
      ]
    }
  ]
}

标签： jsoncsvvega

解决方案

如果您"format": {"type":"csv"}在第 9 行之后添加到规范中，则您的示例有效，即

...
"name": "tuples",
  "format": {"type":"csv"},
  "transform": [
    {
...

错误消息说它正在尝试将 csv 文件解析为 json。我不确定为什么它不像在 vega lite 中那样从文件扩展名中自动检测，但从文档中看起来这是预期的行为：

https://vega.github.io/vega/docs/data/#format

推荐阅读