React-Vega - WARN Бесконечный экстент для поля "x": [Infinity, -Infinity] - PullRequest
Новая
       28

React-Vega - WARN Бесконечный экстент для поля "x": [Infinity, -Infinity]

0 голосов
/ 30 апреля 2020

Код отлично работает в онлайн-редакторе Vega. Но при использовании в компоненте реагирования в консоли появляются предупреждения, а ось X не выводится на выходе. 

import React from 'react';
import { Vega } from 'react-vega';
import { VisualizationSpec } from 'vega-embed';

export function LineGraph() {
  const specs: VisualizationSpec = {
    $schema: 'https://vega.github.io/schema/vega/v5.json',
    description: 'A basic line chart example.',
    width: 500,
    height: 200,
    padding: 5,

    signals: [],

    data: [
      {
        name: 'table',
        format: {
          parse: { x: 'date' },
        },
      },
    ],

    scales: [
      {
        name: 'x',
        type: 'time',
        range: 'width',
        domain: { data: 'table', field: 'x' },
      },
      {
        name: 'y',
        type: 'linear',
        range: 'height',
        nice: true,
        zero: true,
        domain: { data: 'table', field: 'y' },
      },
    ],

    axes: [
      { orient: 'bottom', scale: 'x' },
      { orient: 'left', scale: 'y' },
    ],

    marks: [
      {
        type: 'line',
        from: { data: 'table' },
        encode: {
          enter: {
            x: { scale: 'x', field: 'x' },
            y: { scale: 'y', field: 'y' },
            stroke: { value: 'red' },
            strokeWidth: { value: 2 },
          },
        },
      },
    ],
  };

  const data: any = {
    table: [
      { x: '01-08-2020', y: 28, c: 0 },
      { x: '01-03-2020', y: 43, c: 0 },
      { x: '01-01-2020', y: 81, c: 0 },
      { x: '01-09-2020', y: 19, c: 0 },
      { x: '01-02-2020', y: 52, c: 0 },
      { x: '01-04-2020', y: 24, c: 0 },
      { x: '01-07-2020', y: 87, c: 0 },
      { x: '01-07-2020', y: 17, c: 0 },
      { x: '01-08-2020', y: 68, c: 0 },
      { x: '01-09-2020', y: 49, c: 0 },
    ],
  };

  const signalListeners = {};
  return (
    <div>
      <Vega data={data} signalListeners={signalListeners} spec={specs} />
    </div>
  );
}

Предупреждения:

ПРЕДУПРЕЖДЕНИЕ Бесконечный экстент для поля "y": [Infinity, -Infinity]

WARN Бесконечный экстент для поля "x": [Infinity, -Infinity]

Как определить экстент в вега?

1 Ответ

0 голосов
/ 07 мая 2020

Эта ошибка состоит из двух частей - предупреждения консоли и отсутствия рендеринга.

Предупреждение консоли выдается в циклах дайджеста, когда данные еще не были введены в спецификацию; не идеально, но AFAIK можно игнорировать.

Рендеринг выглядит из-за ошибки в том, как react-vega обрабатывает разбор даты. Вместо передачи date в виде строк сначала преобразуйте их в Date objects, затем передайте измененные данные компоненту Vega.

...