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));
}