Recién estoy comenzando con react-vega y temo que pueda estar perdiendo algo muy básico. Funciona perfectamente cuando tengo datos incrustados, pero obtengo un comportamiento muy diferente cuando paso los datos al componente.

Entonces esto funciona exactamente como esperaría:

 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 ( {amp}lt;Vega spec={spec} /{amp}gt; ); } 

Dando el siguiente resultado:

correcto

Esperaría que lo siguiente dé exactamente el mismo resultado:

 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 ( {amp}lt;Vega spec={spec} data={data} /{amp}gt; ); } 

Pero genera esto en su lugar:

incorrecto

(tenga en cuenta las leyendas que faltan y las etiquetas de eje truncado). Además, ofrece las siguientes advertencias en la consola:

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

Me estoy perdiendo algo muy básico, estoy seguro, pero no entiendo qué.