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

Question

我正在尝试创建 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 时，我无法让鼠标悬停事件查找日期和代码并正确计算每个代码的索引价格变化值。隐藏点出现，但每个交易品种的索引价格变化线不出现:

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, line, tooltip).properties(
    width=650,
    height=300
)

Altair Interactive Index Chart

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

Answer 1

这在 Altair 中大致是等价的:

from vega_datasets import data
import altair as alt

data = data.stocks.url

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

transparent_points = alt.Chart(data).mark_point(opacity=0).encode(
  x='date:T'
).add_selection(index)

lines = alt.Chart(data).transform_lookup(
  'symbol', from_=alt.LookupSelection('symbol', 'index')
).transform_calculate(
  indexed_price="datum.index && datum.index.price > 0 ? "
                "(datum.price - datum.index.price)/datum.index.price : 0"
).mark_line().encode(
    x='date:T',
    y='indexed_price:Q',
    color='symbol:N'
)

rules = alt.Chart(data).transform_filter(
  index
).mark_rule().encode(
  x='date:T'
)

alt.layer(transparent_points, lines, rules).properties(width=600)