Question

所以我试图用react和vega-lite做一个数据可视化项目。我使用了包装器https://github.com/kristw/react-vega-lite，但这不是给我带来问题的部分（它似乎只是一个没有任何摆弄Vega-Lite的包装器）。

我能做的是将数据导入电子表格并根据某些API调用制作折线图（在这种情况下是对某些股票市场数据的api调用）。

我能做的是在鼠标悬停上重叠规则。我只是想让图表显示从给定点到x轴的线条以及从给定点到y轴的线条，基于鼠标悬停在点x上。我通过以下代码得到的错误是＆＃34;错误：无效规范＆＃34;然后它引用整个对象。没有用，但它必须意味着我定义的东西是错误的。我目前正在使用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"}
    }
  }]
});

编辑：我稍微修改了代码以摆脱一些愚蠢的错误，但我仍然得到＆＃34;无效规范＆＃34;。

编辑编辑：在他们的网站上进行一些搜索之后，我发现https://vega.github.io/vega-lite/docs/selection-nearest.html几乎完全符合我的要求（例如在底部）。不幸的是，我几乎完全复制了这个例子，我仍然收到错误＆＃34;无效的规范＆＃34;。

以下是我现在使用的代码：

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

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

尝试在Vega-Lite中获取鼠标悬停时的参考标记 - ＆＃34;不在规范错误＆＃34;

1 个答案: