Altair：可调整大小的多面图

Question

我需要一个可调整大小的分面图表，但width="container"指的是各个方面。 我能想到的最好的是一些自定义 HTML，但它并不能正常工作。

rand = np.random.RandomState(0)
data = pd.DataFrame\
    ( rand.randint(100,500,(15,2))
    , index=[*["a"]*5,*["b"]*5,*["c"]*5]
    , columns=["x","y"]
    ).rename_axis("k").reset_index()

chart1 =\
    ( alt.Chart(data)
    . mark_point()
    . encode(x="x",y="y",color="k",shape="k",size="k")
    )

chart2 =\
    ( alt.Chart(data)
    . transform_regression
        ( on="x"
        , regression="y"
        , groupby=["k"]
        , method="poly"
        )
    . mark_line()
    . encode(x="x",y="y",color="k")
    )

chart =\
    ( (chart1 + chart2)
    . properties(height=300, width="container")
    . facet(column="k:N")
    . interactive()
    )

stats.chart_embed\
    ( chart
    , filename="TEMP.html"
    , container=container
    , style=style
    )

container="""<div class="test"><div class="vega-vis"></div></div>"""

style = """
body {
  white-space: nowrap;
}
.vega-vis {
  width: 100%;
}
.test {
  width: 32%;
}
...
"""

Answer 1

应该做更多的研究。 已经有一些stackoverflow问题。 最好的描述使用 javascript 来设置宽度。 我不确定您是否可以通过addResizeListener连接到 Vega 的调整大小机制而不触发另一个调整大小； 必须注意避免无限循环。 或者您可以禁用自动调整大小，通过ResizeObserver挂钩容器的调整大小事件并通过view.width().run()触发图表调整大小。

• vega-lite：如何使用 facet 设置响应宽度？

具有许多解决方法的开放 Vega 问题，例如编辑 Vega JSON。 我想通过opt.patch到vegaEmbed的 JSON-PATCH 。 然而，当更新width信号时，补丁可能会被覆盖。

• 更改 facet 创建大小的方式以允许自动调整大小与 facet #5219

还有 Vega PR 草案：

• 壮举：支持自动调整多面图的大小 #6672

最后，您可以修改 HTML。 一个完美表达的版本：

chart =\
    ( (chart1 + chart2)
    . properties
        ( height=300
        , width="container"
        )
    . facet(column="k:N")
    . properties
        ( autosize=alt.AutoSizeParams
            ( type="fit"
            # The resize parameter is the only required parameter, but I
            # included the others in case you have a more complicated chart.
            , resize=True
            , contains="padding"
            )
        )
    . interactive()
    )

<div class="vega-vis"></div>

.vega-vis {
  width: 100%;
}
.chart-wrapper {
  /* Normally 'chart-wrapper' is the size of its 'vega-vis' container minus
   * the padding for the button. The size of 'chart-wrapper' determines the
   * size of the canvas/plot. So you want 'chart-wrapper' to be 1/3 of the
   * container minus the padding.
  */
  width: calc(33% - var(--vega-action-padding,38px));
}