您如何根据鼠标悬停在 Altair x 轴上的日期以交互方式计算指数价格变化？

如何解决您如何根据鼠标悬停在 Altair x 轴上的日期以交互方式计算指数价格变化？

我正在尝试创建此 an Altair version 的 Vega-Lite API Interactive Index Chart，它本身是根据此 Vega-Lite JSON version 改编的。

在 altair 中，我无法让 transform_lookup 和 transform_calculate 与鼠标悬停选择一起使用，因此每个符号的 y 轴上显示的索引价格值是根据鼠标悬停在 x-上的日期计算的轴。

在 Vega-Lite 中，以下转换（即查找和计算）根据鼠标悬停在 x 轴上的日期计算索引价格变化：

chart = {
  const mouSEOver = vl
    .selectSingle("index")
    .on("mouSEOver")
    .encodings("x")
    .nearest(true)
    .init({ x: { year: 2005,month: 1,date: 1 } });

  const base = vl.mark().encode(
    vl.x().fieldT("date").axis(null)
  );

   const hiddenPoints = base
    .markPoint({ opacity: 0.1 })
    .select(mouSEOver)
    .encode(
      // Let's color code it interactively to demonstrate it is working,but we will remove it later
      vl.color().if(mouSEOver,vl.value("firebrick")).value("steelblue")
    );
  
  const line = base
    .markLine()
    .transform(
      vl.lookup("symbol").from(mouSEOver.key("symbol")),vl.calculate(
        "datum.index && datum.index.price > 0 ? (datum.price - datum.index.price)/datum.index.price : 0"
      ).as("indexed_price")
    )
    .encode(
      vl.y().fieldQ("indexed_price").axis({ format: "%" }),vl.color().fieldN("symbol")
    );

  const tooltipBase = base
    .transform(vl.filter(mouSEOver))
    .encode(vl.color().value("firebrick"));

  const tooltip = vl.layer(
    tooltipBase.markRule({ strokeWidth: 0.5 }),tooltipBase.markText({ align: "center",fontWeight: 100 }).encode(
      vl.y().value(310),vl.text().fieldT("date").timeUnit("yearmonth")
    )
  );

  return vl
    .layer(hiddenPoints,line,tooltip)
    .data("data/stocks.csv")
    .width(width - 150)
    .height(300)
    .render();
}

Vega-Lite API Interactive Index Chart

当我尝试将此代码转换为 altair 时，我无法通过鼠标悬停事件来查找日期和符号并正确计算每个符号的索引价格变化值。 hiddenPoints 出现，但每个符号的索引价格变化线没有出现：

mouSEOver = alt.selection_single(name='index',on='mouSEOver',encodings=['x'],nearest=True,init={ 'x': { 'year': 2005,'month': 1,'date': 1 } })

base = alt.Chart(stocks).mark_line().encode(
    x=alt.X('date:T',axis=None,title=None),)

hiddenPoints = base.mark_point(opacity=0.1).add_selection(mouSEOver).encode(
    color=alt.condition(mouSEOver,alt.value('firebrick'),alt.value('steelblue'))
)

line = base.mark_line().transform_lookup(
    lookup='symbol',from_=alt.LookupData(data='index',key='symbol',fields=['date','price'])
).transform_calculate(
    indexed_price="datum.index && datum.index.price > 0 ? (datum.price - datum.index.price) / datum.index.price : 0"
).encode(
    y=alt.Y('indexed_price:Q',title='Indexed Price',axis=alt.Axis(format='%')),color=alt.Color('symbol:N',title='Symbol')
)

tooltipBase = base.transform_filter(mouSEOver).encode(
    color=alt.value('firebrick')
)

tooltip = alt.layer(
    tooltipBase.mark_rule(strokeWidth=0.5),tooltipBase.mark_text(align='center',fontWeight=100).encode(
      y=alt.value(310),text='yearmonth(date):T'
    )
)

alt.layer(hiddenPoints,tooltip).properties(
    width=650,height=300
)

Altair Interactive Index Chart

在altair 中，如何使用带有transform_lookup 和transform_calculate 的鼠标悬停事件来查找日期和交易品种并计算每个交易品种的索引价格变化值？感谢您的帮助。