3

所以我正在尝试用 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} />。我没有包括那部分，因为我再次测试了它是否有效。如果有人看到任何错误，请告诉我。

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几乎完全符合我的需要（底部的示例）。不幸的是，我几乎完全复制了这个例子，但我仍然收到错误“invalid spec”。

这是我现在使用的代码：

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
              },
            },
      },
    }
  ]
});
4

1 回答 1

1

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

于 2017-08-25T21:31:43.667 回答