Plotly图形组件不能接受视口单元来设置文本注释字体大小

Question

我正在使用Plotly-Dash并且需要我的文本注释的字体大小来缩放视口宽度,就像我的图形那样.对于我的布局不同的头,我能够直接设置font-size: '1vw',但vw不是用于设置的接受单元font-size的style一个属性dcc.Graph分量.这是相关的追溯:

ValueError:为scatter.textfont的'size'属性收到的元素无效.无效元素包括:['1vw','1vw','1vw','1vw','1vw','1vw','1vw' ,'1vw','1vw','1vw']

The 'size' property is a number and may be specified as:
  - An int or float in the interval [1, inf]
  - A tuple, list, or one-dimensional numpy array of the above

我认为如果dcc.Graph组件可以接受视口单元(例如style = {height: 30vw, width: 30vw})并简单地将它们转换为浏览器侧的像素,那么我应该能够执行类似的转换font-size.

在Python端有没有办法以像素为单位检索视口宽度,这样我就可以为字体大小执行自己的缩放逻辑？

以下是演示此行为的示例Dash应用程序:

import dash
from dash.dependencies import Input, Output
import dash_core_components as dcc
import dash_html_components as html
import plotly.graph_objs as go

labels = {'Point 1': (3.5,5), 'Point 2': (1.5,2), 'Point 3': (3.5,8)}

app = dash.Dash(__name__)

app.layout = html.Div([

    html.H1('Test', id='test', style={'margin': 50}),

    dcc.Graph(id='my-plot', style={'margin': 10}),

])

@app.callback(
    Output('my-plot', 'figure'),
    [Input('test', 'children')])
def update_graph(val):

    return {

        'data': [go.Scatter(
            x=[v[0]],
            y=[v[1]],
            text=k,
            mode='text'
        ) for k, v in labels.items()],

        'layout': go.Layout(
            margin={'l': 40, 'b': 40, 't': 40, 'r': 40},
            shapes=[
                {
                    'type': 'path',
                    'path': ' M 1 1 L 1 3 L 4 1 Z',
                    'fillcolor': 'rgba(44, 160, 101, 0.5)',
                    'line': {
                        'color': 'rgb(44, 160, 101)',
                    }
                },
                {
                    'type': 'path',
                    'path': ' M 3,7 L2,8 L2,9 L3,10, L4,10 L5,9 L5,8 L4,7 Z',
                    'fillcolor': 'rgba(255, 140, 184, 0.5)',
                    'line': {
                        'color': 'rgb(255, 140, 184)',
                    }
                },
            ]
        )
    }

if __name__ == '__main__':
    app.run_server()

Answer 1

据我环顾四周的了解，没有办法仅使用plotly-dash. 您需要实现的本质上是“响应式”排版，这个主题有一些非常有趣的文章：

• https://css-tricks.com/books/volume-i/scale-typography-screen-size/
• https://css-tricks.com/snippets/css/fluid-typography/
• 使用单位调整字体大小em：https://developer.mozilla.org/en-US/docs/Web/CSS/font-size#Ems

Dash 提供了覆盖应用程序默认 CSS 和 JS 的选项，您可以从布局文档中看到如何使用外部 CSS 文件。

我的建议：研究结果页面，了解如何标记文本注释（id和/或class），并使用上面文章中提供的方法来创建令人满意的结果。（很抱歉，除了建议之外，我真的不能做更多的事情，但我还没有看到你的代码示例：/）

编辑（评论和问题编辑后）：

因此，由于文本注释具有类，textpoint我们将覆盖默认的 CSS：

1. 创建建议的文件夹结构：

   - app.py
   - assets/
   |--- typography.css
   

2. 应用typography.css上述方法之一（我将使用第二个项目符号示例）：

   .textpoint{
       font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
   }
   

编辑#2：

我发现了问题及其解决方法：

• 在 Dash 版本 >= 0.22 上添加自定义 CSS 的方法确实是上面的方法，并且有效。
• 为了将自定义规则应用于注释，我们需要定位的元素是类text内的标签.textpoint（CSS 语法.textpoint text：）
• 由于某种原因，自定义 CSS 规则被覆盖（可能出于类似的原因，在这篇 SO 帖子的最佳答案中进行了解释：自定义 css 被 bootstrap css 覆盖）。所以我们需要“核”选项!important。

利用上面的内容，typography.css应该如下所示：

.textpoint text{
  font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300))) !important;
}