object - 尝试在 Vega-Lite 中的鼠标悬停时获取引用标记 - "Not in Spec Error"

Question

所以我正在尝试用 React 和 vega-lite 做一个数据可视化项目。我正在使用包装器 https://github.com/kristw/react-vega-lite但这并不是给我带来问题的部分(它似乎只是一个包装器，没有对 Vega-Lite 进行任何处理)。

我能做的是将数据导入电子表格并根据一些 API 调用(在本例中是对一些股票市场数据的 API 调用)制作折线图。

我不能做的是在鼠标悬停时叠加规则。我只是想让图表显示从给定点到 x 轴的线以及从给定点到 y 轴的线，基于沿点 x 的鼠标悬停。我使用以下代码得到的错误是“错误:无效规范”，然后它引用了整个对象。没有帮助，但这一定意味着我定义的东西是错误的。我目前正在使用 Vega-Lite v2。

我一直在尝试使用这份白皮书 (https://idl.cs.washington.edu/files/2017-VegaLite-InfoVis.pdf) 作为指南。在第 8 页，他们有这个例子。

如您所见，它看起来非常简单，并且它们只有一条从数据到 x 轴的垂直线。我想要同样的东西，减去图表的重新平衡，并在 y 轴上加上一条水平线。

这是我的代码。我通过简单的说 <Mygraph data={datatable} /> 从我的 react 文件中调用它.我没有包括那部分，因为我再次测试了它是否有效。如果有人看到任何错误，请告诉我。

import React, { PropTypes } from 'react';
import VegaLite, {createClassFromLiteSpec} from 'react-vega-lite';



export default createClassFromLiteSpec('LineChartLite', {
  "$schema": "https://vega.github.io/schema/vega-lite/v2.json",
  "width": 1000,
  "height": 400,
  "padding": 10,
  "description": "Stock price close over time.",
  "layers": [{
    "selection": {
       "indexPtx": {
         "type": "point", "on": "mousemove",
         "project": {"field": ["data"]},
         "nearest": true
       },
       "indexPtx": {
         "type": "point", "on": "mousemove",
         "project": {"field": ["closing price"]},
         "nearest": true
       }
    },
    "mark": "line",
    "encoding": {
      "x": {"field": "date", "type": "temporal",
            "axis":{
              "tickCount": 20
            }
          },
      "y": {"field": "closing price", "type": "quantitative",
            "scale":{
              "zero": false
            },
          },
    },
  }, {
    "mark":"rule",
    "encoding": {
      "x": {"selection": "indexPtx.x", "type": "temporal"},
      "color": {"value": "red"}
    },
    "mark":"rule",
    "encoding": {
      "y": {"selection": "indexPty.y", "type": "temporal"},
      "color": {"value": "red"}
    }
  }]
});

编辑:我稍微修改了代码以消除一些愚蠢的错误，但我仍然收到“无效规范”。

编辑编辑:在他们的网站上进行一些搜索后，我发现 https://vega.github.io/vega-lite/docs/selection-nearest.html几乎正是我所需要的(底部的例子)。不幸的是，我几乎完全复制了这个例子，但我仍然收到错误“无效规范”。

这是我现在使用的代码:

import React, { PropTypes } from 'react';
import VegaLite, {createClassFromLiteSpec} from 'react-vega-lite';



export default createClassFromLiteSpec('LineChartLite', {
  "$schema": "https://vega.github.io/schema/vega-lite/v2.json",
  "width": 1000,
  "height": 400,
  "padding": 10,
  "description": "Stock price close over time.",
  "layers": [
    {
      "selection": {
        "index": {
          "type": "single", "on": "mousemove",
          "encodings": ["x"],
          "nearest": true
        }
      },
    },
    {
      "transform": [
        {"filter": {
          "and": ["index.date", {"selection": "index"}]
        }}
      ],
      "mark": "rule",
      "encoding": {
        "x": {"field": "date", "type": "temporal", "axis": null}
      }
    },
    {
      "mark": "line",
      "encoding": {
        "x": {"field": "date", "type": "temporal",
              "axis":{
                "tickCount": 20
              }
            },
        "y": {"field": "closing price", "type": "quantitative",
              "scale":{
                "zero": false
              },
            },
      },
    }
  ]
});

Answer 1

索引图表在我们的研究原型(prototype)中有效，但我们还没有在生产代码库中实现它。这是 GitHub 上的问题 https://github.com/vega/vega-lite/issues/2765 .