Vega-Lite API 中带有多系列折线图的工具提示答案

【问题标题】：Tooltip with Multi-Series Line Chart in Vega-Lite APIVega-Lite API 中带有多系列折线图的工具提示
【发布时间】：2020-07-08 18:32:49
【问题描述】：

我正在尝试在可观察笔记本的 Vega-Lite API 中重新创建此 example。我可以使用 Observable 中另一个示例中的多线系列重新创建标尺。但我无法添加工具提示，我想添加代码代码和股票价格。这是我的Observable notebook。我会将工具提示规范放在哪里？谢谢！

    plot = {
  // select a point for which to provide details-on-demand
  const hover = vl.selectSingle()
    .encodings('x')  // limit selection to x-axis value
    .on('mouseover') // select on mouseover events
    .nearest(true)   // select data point nearest the cursor
    .empty('none');  // empty selection includes no data points

  // define our base line chart 
  const line = vl.markLine()
  .data(stocks)
  .encode(
    vl.x().fieldT('date'),
    vl.y().fieldQ('price'),
    vl.color().fieldN('symbol'),
  );
  
  // shared base for new layers, filtered to hover selection
  const base = line.transform(vl.filter(hover));

  return vl.data(stocks)
    .layer(
      line,
      // add a rule mark to serve as a guide line
      vl.markRule({color:'#c0c0c0'})
        .transform(
          vl.filter(hover),
          vl.pivot({pivot: 'symbol', value: 'price', groupby: ['date']}))
        .encode(vl.x().fieldT('date'),
               vl.tooltip().fieldQ('price')),
      // add circle marks for selected time points, hide unselected points
      line.markCircle()
        .select(hover) // use as anchor points for selection
        .encode(vl.opacity().if(hover, vl.value(1)).value(0),
                vl.tooltip(['symbol','price']))
    )
    .render(); }

【问题讨论】：

我无法在您链接到的可观察笔记本中看到图表规范。您介意在此处将其粘贴到您的问题中吗？
很抱歉，如果您单击可观察笔记本中的左列，它会显示代码。我可以复制过来。但我也只是在 observable notebook 中显示了代码。
您的版本似乎缺少枢轴变换，这是使所有行的值显示在同一工具提示中的关键。请参阅您在问题中链接到的 Vega-Lite 示例。
谢谢，我也注意到了。我不确定如何在 vega lite api 版本中格式化枢轴转换。我更新了我的代码，但我认为我的格式不正确。

标签： d3.js vega-lite vega observablehq

【解决方案1】：

这是您在该示例中使用枢轴的方式

vl.pivot('symbol').value('price').groupby( ['date']))

那里的数据透视表可帮助您将数据转换为表格格式，因此您可以在一行中查看所有可用的交易品种价格。以下是带有工具提示的 Vega-Lite API 多线系列图表的完整工作示例：

https://observablehq.com/@vega/multi-series-line-chart-with-tooltip

【讨论】：