将数据传递给 react-vega

Question

我刚刚开始使用 react-vega，担心我可能会遗漏一些非常基本的东西。当我嵌入数据时，它工作得很好，但是当我将数据传递给组件时，我得到了非常不同的行为。

所以这完全符合我的预期：

function App() {
  const spec = {
    "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
    "data": {
      "values": [
        {"ElapsedTime": 0.0017, "RPM": 11700},
        {"ElapsedTime": 0.005, "RPM": 11940},
        {"ElapsedTime": 0.0083, "RPM": 12000}
      ]
    },
    "mark": "line",
    "encoding": {
      "x": {"field": "ElapsedTime", "type": "quantitative"},
      "y": {"field": "RPM", "type": "quantitative"}
    }
  };

  return (
    <Vega spec={spec} />
  );
}

给出以下结果：

我希望以下会给出完全相同的结果：

function App() {
  const spec = {
    "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
    "data": {"name": "table"},
    "mark": "line",
    "encoding": {
      "x": {"field": "ElapsedTime", "type": "quantitative"},
      "y": {"field": "RPM", "type": "quantitative"}
    }
  };

  const data = {
    "table": [
      {"ElapsedTime": 0.0017, "RPM": 11700},
      {"ElapsedTime": 0.005, "RPM": 11940},
      {"ElapsedTime": 0.0083, "RPM": 12000}
    ]
  }

  return (
    <Vega spec={spec} data={data} />
  );
}

但它生成的是：

（注意缺失的图例和截断的轴标签）。此外，它在控制台中给出以下警告：

WARN – "Infinite extent for field \"ElapsedTime\": [Infinity, -Infinity]"
WARN – "Infinite extent for field \"RPM\": [Infinity, -Infinity]"

我肯定遗漏了一些非常基本的东西，但我不知道是什么。

Answer 1

这可以通过在规范中指定自动调整大小来解决。

const spec = {
    "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
    "autosize": {
        "resize": true
    }
    ...
}

将数据传递给 react-vega

Passing data to react-vega

reactjs

vega-lite